• Code source

    Une fidèle visiteuse, sous Mac, reprend et personnalise certains des codes de montage que je propose.

    Dernièrement, publiant ces montages en grand format (1600px par 900px), j'ai eu la flemme de les modifier en 1000px par 563px, plus compatible avec la plupart des zones articles des visiteurs.

    Ce qui fait que vous voyez le résultat mais vous ne voyez pas la recette, même dans un format et avec des images à modifier.

    Nous avons le moyen de lire le code source d'une page visitée: sous Mac, sous Safari: Préférences Safari/Avancées/activer le menu.

    Sous Windows ou Linux, un simple clic droit sur la page vous propose: "Page source".

    Mais l'affaire n'est pas gagnée pour autant  car ce code source reprend tous les éléments de la page (entête, modules, pied de page, articles...) et il faut retrouver le code du montage qui vous intéresse au milieu de tout ça !

    Si, comme sur mon blog, il n'y a qu'un article par page, c'est déjà plus simple mais avec 5 articles...

    Deux repères sont la date et le titre de l'article mais encore faut-il balayer l'ensemble du code pour les retrouver.

    J'ai pris comme exemple ma page du menu mai 2020: "Exemple 208" pour trouver un montage publié sans code.

    Code source

    J'ai balayé la page pour arriver à la ligne 265 afin de trouver le titre de ma page: Exemple 208.

    Pour un article, on peut chercher le titre et/ou la date de publication.

    La partie qui nous intéresse est:

    Code source

    Le code source du montage est:

    <div style="width: 1600px; height: 900px; margin: 5px auto;">
    <p id="noa0">Survol</p>
    <p id="noa1" class="noa">&nbsp;</p>
    <p id="noa2" class="noa">&nbsp;</p>
    <p id="noa3" class="noa">&nbsp;</p>
    <p id="noa4" class="noa">&nbsp;</p>
    <p id="noa5" class="noa">&nbsp;</p>
    <p id="noa6" class="noa">&nbsp;</p>
    <p id="noa7" class="noa">&nbsp;</p>
    <p id="noa8" class="noa">&nbsp;</p>
    </div>
    <style><!--
    #noa0{position:absolute; z-index:1; width:200px; transform:translate(700px,20px); font-size:50px; color:aqua; text-shadow:2px 2px black;}
    .noa{position:absolute; z-index:1; width:400px; height:225px; box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white; transition:all 1s linear;}
    #noa1{box-sizing:border-box; background:url('http://ekladata.com/3ZBzpauRhalRVVaVEWlZP6VCei4.jpg'); background-size:cover; transform:translate(0px,200px);}
    #noa2{box-sizing:border-box; background:url('http://ekladata.com/FW1fPb9ZgkI9KoJQTsIMwMaSprg.jpg'); background-size:cover; transform:translate(0px,550px);}
    #noa3{box-sizing:border-box; background:url('http://ekladata.com/URCIdX_41iyzcxFS4RGtgriGxz4.jpg'); background-size:cover; transform:translate(600px,200px);}
    #noa4{box-sizing:border-box; background:url('http://ekladata.com/WNQPHldBOjjXpgOkbqOpbYG8Asc.jpg'); background-size:cover; transform:translate(600px,550px);}
    #noa5{box-sizing:border-box; background:url('http://ekladata.com/7xo9wkEepXIHemdDAqhNHpji4zo.jpg'); background-size:cover; transform:translate(1200px,200px);}
    #noa6{box-sizing:border-box; background:url('http://ekladata.com/FpYQ2KgPk_ZjpBTdmJc7VsWKNdI.jpg'); background-size:cover; transform:translate(1200px,550px);}
    #noa7{box-sizing:border-box; background:url('http://ekladata.com/ospgW74Bih4wEe1PsHv-O7tXIK8.jpg'); background-size:cover; transform:translate(300px,365px);}
    #noa8{box-sizing:border-box; background:url('http://ekladata.com/0Cdl2hFuU-3H8yLrPyV_0YDNzbE.jpg'); background-size:cover; transform:translate(900px,365px);}
    #noa1:hover,#noa2:hover,#noa3:hover,#noa4:hover,#noa5:hover,#noa6:hover,#noa7:hover,#noa8:hover{z-index:5; width:1600px; height:900px; border-radius:0%; transform:translate(0px,0px);}
    --></style>

    Vous retrouvez les lignes que j'indique et qu'il vous faut modifier pour les adapter à vos dimensions, avec les adresses de vos images ainsi que le positionnement des images.