• Pour Christine

    Cette visiteuse qui me donne des idées de montage, m'a proposé de créer un code pour afficher 8 images en 1150x647px, rapport 16/9, sur lesquelles elle va placer une corne, sur l'angle bas/droit et qui souhaite faire une animation comme un livre, afin qu'en cliquant sur l'image, on fasse avancer la page comme celle d'un livre.

    Certains sites, en ligne, nous proposent de tels montages, avec des lignes de codes en javascript, qui permettent une action du visiteur.

    Ma proposition n'est pas aussi savante et fait avancer le cadre qui contient les images derrière la fenêtre visible, au clic sur chaque image.

    Ce cadre fait 1150x8=9200px par 647px de haut et est déplacé de -1150px, vers la gauche, par chaque clic.

    Le principe est applicable à d'autres dimensions d'images.

    J'ai ajouté un cadre gris, de 8 px mais les dimensions du montage sont celles demandées:1150x647px (ou 648px, selon l'arrondi du programme)


    <div id="fd"><input id="bt1" class="bt" type="text" /><input id="bt2" class="bt" type="text" /><input id="bt3" class="bt" type="text" /><input id="bt4" class="bt" type="text" /><input id="bt5" class="bt" type="text" /><input id="bt6" class="bt" type="text" /><input id="bt7" class="bt" type="text" /><input id="bt8" class="bt" type="text" /> <span id="im1"><img src="http://ekladata.com/JabPGyA2kmmps_GZBCIp3Eh7nG8.jpg" alt="" /><img src="http://ekladata.com/Zl55Pi1WPQ61R9s7U96gVh24ajM.jpg" alt="" /><img src="http://ekladata.com/taL-ka0u95ZdbRYr6bQKxDlLo28.jpg" alt="" /><img src="http://ekladata.com/vQ5PRWS8ZzDcklAK7qKt2KyxoNQ.jpg" alt="" /><img src="http://ekladata.com/NRUg3gZQ5m7CStH7p6GvDn6_Vd8.jpg" alt="" /><img src="http://ekladata.com/t-JP5r5TAXM8vpW4aQZ6GNhnbiI.jpg" alt="" /><img src="http://ekladata.com/1ZY7eD4WhPN_Iir5Yi1sdcbq03E.jpg" alt="" /><img src="http://ekladata.com/WZgVEXVsTpTqlj-t7Wg3TcMBNtY.jpg" alt="" /></span></div>
    <style><!--
    #fd{position:relative; width:1150px; height:647px; margin:0px auto; box-sizing:border-box; border:8px ridge grey; overflow:hidden;}
    .bt{position:absolute; width:1150px; height:647px; transform:translate(0px,0px); background:transparent;}
    #bt1{ z-index:10;}
    #bt2{ z-index:9;}
    #bt3{ z-index:9;}
    #bt4{ z-index:9;}
    #bt5{ z-index:9;}
    #bt6{ z-index:9;}
    #bt7{ z-index:9;}
    #bt8{ z-index:9;}
    #im1{position:absolute; width:9200px; height:647px; display:inline-block; transform:translate(0px,0px); transition:all 1s linear;}
    #bt1:focus ~ #bt2{z-index:11;}
    #bt2:focus ~ #bt3{z-index:12;}
    #bt3:focus ~ #bt4{z-index:13;}
    #bt4:focus ~ #bt5{z-index:14;}
    #bt5:focus ~ #bt6{z-index:15;}
    #bt6:focus ~ #bt7{z-index:16;}
    #bt7:focus ~ #bt8{z-index:10;}

    #bt1:focus ~ #im1{transform:translate(-1150px,0px);}
    #bt2:focus ~ #im1{transform:translate(-2300px,0px);}
    #bt3:focus ~ #im1{transform:translate(-3450px,0px);}
    #bt4:focus ~ #im1{transform:translate(-4600px,0px);}
    #bt5:focus ~ #im1{transform:translate(-5750px,0px);}
    #bt6:focus ~ #im1{transform:translate(-6900px,0px);}
    #bt7:focus ~ #im1{transform:translate(-8050px,0px);}
    --></style>