• Pour Christine en 800x600px

    Les dimensions du montage qui m'a été proposé ne sont pas "standard" alors, voici une version en 800x600px.
    Clic sur chaque image.


    <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/IMZgqIUhgVLwPZw6uzme6WL2MbA.jpg" alt="" /><img src="http://ekladata.com/pUT6eUtc6mYhlvrDHhRLFelBVGM.jpg" alt="" /><img src="http://ekladata.com/CGcnRbOUiv0sPkXIsBg7id_aIqI.jpg" alt="" /><img src="http://ekladata.com/V0GzcYZnqUXDBbeJnkYrS9FESXU.jpg" alt="" /><img src="http://ekladata.com/82h41j6ay0RtbV4tqRn77Z1uMzs.jpg" alt="" /><img src="http://ekladata.com/26UQfLf4jDPZBVphfBsq4G9g5n4.jpg" alt="" /><img src="http://ekladata.com/OgY5HJfvgasTFOFGYQUBpBJ8P34.jpg" alt="" /><img src="http://ekladata.com/rponJV6zv6qAzJ-ZY5N8pYQpcRE.jpg" alt="" /></span></div>

    <style><!--
    #fd{position:relative; width:800px; height:600px; margin:0px auto; box-sizing:border-box; border:8px ridge grey; overflow:hidden;}
    .bt{position:absolute; width:800px; height:600px; 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:6400px; height:600px; 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(-800px,0px);}
    #bt2:focus ~ #im1{transform:translate(-1600px,0px);}
    #bt3:focus ~ #im1{transform:translate(-2400px,0px);}
    #bt4:focus ~ #im1{transform:translate(-3200px,0px);}
    #bt5:focus ~ #im1{transform:translate(-4000px,0px);}
    #bt6:focus ~ #im1{transform:translate(-4800px,0px);}
    #bt7:focus ~ #im1{transform:translate(-5600px,0px);}
    --></style>


    Quelques mots pour expliquer la construction:

    Les images ont été dimensionnées, du ratio 16/9 au ratio 4/3, par le logiciel gratuit the Gimp.

    Les images ont été hébergées, avec copie de leurs adresses individuelles, chez Ekla, dans une galerie d'images (G1), ce qui les rend accessibles très facilement.

    La commande au clic par "input" a un inconvénient, lorsqu'on place plusieurs commandes dans un même montage: un clic sur un bouton provoque l'animation de son élément associé mais, en même temps, ramène un autre élément animé à sa position de départ; je n'ai donc pu animer chaque image indépendamment.

    J'ai donc placé mes 8 images dans un cadre et c'est ce cadre qui se déplace; chaque bouton commandant le même élément, nous évitons l'inconvénient des 2 animations au clic.

    Le nombre d'images est à votre convenance en + ou en -.

    Les boutons sont placés au dessus du montage et sont déplacés en profondeur, à chaque clic, afin que le dernier soit toujours au dessus.