• Par tranches

    Ce code m'est demandé par une fidèle visiteuse: le voici au format 60vw/33.75vw soit 1152px par 648px chez moi.

    Je m'aperçois, en le recopiant, que mes images sont en Gif et non en jpeg: une erreur de ma part mais vous remplacerez mes adresses par les vôtres, sans souci.

    Si vous voulez dimensionner vos images au ratio 16/9 en 1152px par 648px de haut, ajoutez @1152x648 avant le .jpg dans les adresses de vos images.

    Survolez chaque tranche.

     

     

     

     

     

     


    <p><span style="background-color: #00ffff;">Survolez chaque tranche.</span></p>
    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <p id="z1" class="za">&nbsp;</p>
    <p id="z2" class="za">&nbsp;</p>
    <p id="z3" class="za">&nbsp;</p>
    <p id="z4" class="za">&nbsp;</p>
    <p id="z5" class="za">&nbsp;</p>
    <p id="z6" class="za">&nbsp;</p>
    </div>

    <style><!--
    .za{position:absolute; z-index:1; width:9vw; height:33.75vw;background-size:60vvw 33.75vw; transition:all 1s linear;}
    #z1{background:url('http://ekladata.com/4qIt7JyaMpHD_CgMVwL_8XnuIRw@1152x648.gif'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); width:10vw;}
    #z2{background:url('http://ekladata.com/mEIyZzgvTbc7rC1arz4kwmX0-nQ@1152x648.gif'); background-size:60vw 33.75vw; background-position:-11vw 0vw; transform:translate(11vw,0vw);}
    #z3{background:url('http://ekladata.com/m84pW-CJrpQSoV4FSDFmf-hUfvU@1152x648.gif'); background-size:60vw 33.75vw; background-position:-21vw 0vw; transform:translate(21vw,0vw);}
    #z4{background:url('http://ekladata.com/L12id_v6MeCRdqdiaXUu1OXT4Tc@1152x648.gif'); background-size:60vw 33.75vw; background-position:-31vw 0vw; transform:translate(31vw,0vw);}
    #z5{background:url('http://ekladata.com/adW2jfgLeQZXXLw6vnKiPBri7hs@1152x648.gif'); background-size:60vw 33.75vw; background-position:-41vw 0vw; transform:translate(41vw,0vw);}
    #z6{background:url('http://ekladata.com/POXmy9h6JpR-Nbf30qmgjy0JDwg@1152x648.gif'); background-size:60vw 33.75vw; background-position:-51vw 0vw; transform:translate(51vw,0vw);}
    #z1:hover,#z2:hover,#z3:hover,#z4:hover,#z5:hover,#z6:hover{z-index:5;width:60vw;transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>