• Diapo au clic

    De la même façon que nous avons fait défiler les images au clic, nous pouvons, par un autre code, les changer au clic sur chaque image.

    Le code est différent et sans doute déjà proposé; cependant, il est ici en mesures adaptatives (80vw/92vh) mais il vous suffit de remplacer ces unités par les vôtres, en pixel, et de remplacer mes adresses images par les vôtres, quelles que soient leurs dimensions à l'hébergement.

    Le montage est paramétré pour se center dans votre page; vous pouvez retirer ou ajouter des images en retirant ou ajoutant des "input"

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.4vh ridge white;"><input id="ph0" type="text" /><input id="ph1" type="text" /><input id="ph2" type="text" /><input id="ph3" type="text" /><input id="ph4" type="text" /></div>
    <style><!--
    #ph0{position:absolute; z-index:5; width:80vw; height:92vh; background:url('http://ekladata.com/HTnZn2GojsEaBzoWiTqc4ETEVYM.jpg'); background-size:cover; transition:all 0.5s linear;}
    #ph1{position:absolute; z-index:2; width:80vw; height:92vh; background:url('http://ekladata.com/7jhRWsg-nnpqtW-rjAeNUMht9uI.jpg'); background-size:cover; transition:all 0.5s linear;}
    #ph2{position:absolute; z-index:2; width:80vw; height:92vh; background:url('http://ekladata.com/5ZkY5wCP1XbJc6FC9ok737rHkNo.jpg'); background-size:cover; transition:all 0.5s linear;}
    #ph3{position:absolute; z-index:2; width:80vw; height:92vh; background:url('http://ekladata.com/ckFpGl8M4lUhA6RncdzYGvxXX5c.jpg'); background-size:cover; transition:all 0.5s linear;}
    #ph4{position:absolute; z-index:2; width:80vw; height:92vh; background:url('http://ekladata.com/WsuEKaXqQ3y2_7k87nBWSVfhCZo.jpg'); background-size:cover; transition:all 0.5s linear;}


    #ph0:focus ~ #ph1,#ph1:focus ~ #ph2,#ph2:focus ~ #ph3,#ph3:focus ~ #ph4{z-index:10;}

    --></style>

    Supposons un montage en 1150x647px, le code deviendra, en créant une class pour les attributs communs:

    <div style="width: 1150px; height: 647px; margin: 5px auto; border: 6px ridge white;"><input id="ph0" class="ph" type="text" /><input id="ph1" class="ph" type="text" /><input id="ph2" class="ph" type="text" /><input id="ph3" class="ph" type="text" /><input id="ph4" class="ph" type="text" /></div>
    <style><!--
    .ph{position:absolute;  width:1150px; height:647px; transition:all 0.5s linear;}
    #ph0{z-index:5; background:url('http://ekladata.com/HTnZn2GojsEaBzoWiTqc4ETEVYM.jpg'); background-size:cover; }
    #ph1{z-index:2; background:url('http://ekladata.com/7jhRWsg-nnpqtW-rjAeNUMht9uI.jpg');  background-size:cover;}
    #ph2{z-index:2; background:url('http://ekladata.com/5ZkY5wCP1XbJc6FC9ok737rHkNo.jpg');  background-size:cover;}
    #ph3{z-index:2; background:url('http://ekladata.com/ckFpGl8M4lUhA6RncdzYGvxXX5c.jpg');  background-size:cover;}
    #ph4{z-index:2; background:url('http://ekladata.com/WsuEKaXqQ3y2_7k87nBWSVfhCZo.jpg'); background-size:cover; }

    #ph0:focus ~ #ph1,#ph1:focus ~ #ph2,#ph2:focus ~ #ph3,#ph3:focus ~ #ph4{z-index:10;}
    --></style>