• Art.07C.5.21

    Cette page pour un fidèle visiteur qui "voudrait bien, mais n'peut point" utiliser certains codes que j'indique...

    Son gros souci est la dimension de ses images qui sont au ratio 4/3 alors que mes codes utilisent un ratio 16/9.

    Qu'à cela ne tienne, à tout problème sa solution !

    J'ai donc fait des sélections sur mes images pour avoir une image en 750px par 562px, au ratio 4/3 donc et dans les dimensions utilisées par ce visiteur.

    Je les ai hébergées dans une galerie Ekla (E59) et récupéré leurs adresses.

    A partir de là, j'ai écrit le code avec les adresses de mes images et ça donne ça:

     

    Survol

     

     

     

     

     

     

    <div style="width: 750px; height: 563px; border: 1px solid black; margin: 20px auto; background: url('http://ekladata.com/KkRtHev3Wd2H4LwjkOfDOCVffQA.jpg'); background-size: cover; text-align: left;">
    <p id="jm0a">&nbsp;</p>
    <p id="jm0b">Survol</p>
    <p id="jm1" class="jm">&nbsp;</p>
    <p id="jm2" class="jm">&nbsp;</p>
    <p id="jm3" class="jm">&nbsp;</p>
    <p id="jm4" class="jm">&nbsp;</p>
    <p id="jm5" class="jm">&nbsp;</p>
    <p id="jm6" class="jm">&nbsp;</p>
    </div>

    <style><!--
    #jm0a{position:absolute; z-index:1; width:80px; height:563px; background:rgba(0,0,0,0.5); font-size:18px; color:white; text-shadow:2px 2px black; transform:translate(670px,0px);}
    #jm0b{position:absolute; z-index:1; width:80px; font-size:20px; color:white; text-shadow:2px 2px black; transform:translate(670px,0px);}
    .jm{position:absolute; z-index:1; width:50px; height:50px; border-radius:50%; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; transition:all 1s;}
    #jm1{background:url('http://ekladata.com/hDl3NDzOzVcgjn2JO1C7Ny0XPko.jpg'); background-size:750px 563px; background-position:-685px -50px; transform:translate(685px,50px);}
    #jm2{background:url('http://ekladata.com/UoANBIq59igVhd5JB-SjtJUMQUI.jpg'); background-size:750px 563px; background-position:-685px -120px; transform:translate(685px,120px);}
    #jm3{background:url('http://ekladata.com/yybWQTJ_psYYiKwags0E905sWEU.jpg'); background-size:750px 563px; background-position:-685px -190px; transform:translate(685px,190px);}
    #jm4{background:url('http://ekladata.com/jAKxoXAq1ZmAygp1Ds_bdnUWS2Q.jpg'); background-size:750px 563px; background-position:-685px -260px; transform:translate(685px,260px);}
    #jm5{background:url('http://ekladata.com/3uy9K-IWOCD8MhUId3UeufCdcwI.jpg'); background-size:750px 563px; background-position:-685px -330px; transform:translate(685px,330px);}
    #jm6{background:url('http://ekladata.com/j2lbA6TyuTqQN3BNoAW-QjPRVIs.jpg'); background-size:750px 563px; background-position:-685px -400px; transform:translate(685px,400px);}
    #jm1:hover,#jm2:hover,#jm3:hover,#jm4:hover,#jm5:hover,#jm6:hover{z-index:5; width:750px; height:563px; border-radius:0px; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>