• Diapo 20.3.23

    Un diapo exemple pour que vous puissiez modifier l'animation.

    1+5 images, au ratio 16/9, en 1000x563px.

     5 boutons pour faire afficher les images invisibles.

    La commande de départ est au survol de chaque bouton (hover) mais vous pourrez choisir par un clic maintenu (active) ou au clic (focus) par modification du code sur parties indiquées.

     


    <div style="width: 1000px; height: 563px; border: 4px ridge white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left;"><input id="ph1" class="ph" type="button" /> <input id="ph2" class="ph" type="button" /> <input id="ph3" class="ph" type="button" /> <input id="ph4" class="ph" type="button" /> <input id="ph5" class="ph" type="button" /> <img id="pt0" src="http://ekladata.com/QtmwzlZ5Xpa8CfIgaTWNhtyhW98.jpg" alt="" /> <img id="pt1" class="pt" src="http://ekladata.com/ppr9ACJ2idaL0YARXEFoQ5Txqb4.jpg" alt="" /> <img id="pt2" class="pt" src="http://ekladata.com/lpWkWxoDNUlQEK9Bz6uoNAJnWOM.jpg" alt="" /> <img id="pt3" class="pt" src="http://ekladata.com/j_XWhUxZGp1681u6u9OgcHaUJgY.jpg" alt="" /> <img id="pt4" class="pt" src="http://ekladata.com/GwpwIjlPJq7SxbsdeGVDFAkpsMo.jpg" alt="" /> <img id="pt5" class="pt" src="http://ekladata.com/2stdDe-YqVfbKO37f-JI7Iyxwsc.jpg" alt="" /></div>
    <style><!--
    .ph{position:absolute; z-index:5; width:40px; height:40px; border-radius:50%; background:white; border:1px solid black; box-shadow:inset 3px 3px 8px black;}
    #ph1{transform:translate(300px,500px);}
    #ph2{transform:translate(400px,500px);}
    #ph3{transform:translate(500px,500px);}
    #ph4{transform:translate(600px,500px);}
    #ph5{transform:translate(700px,500px);}
    .pt{position:absolute; z-index:2;width:1000px; height:563px; display:none;}
    #pt0{position:absolute;z-index:1; width:1000px; height:563px;}
    .ph:hover{background-color:red;}
    #ph1:hover ~ #pt1,#ph2:hover ~ #pt2,#ph3:hover ~ #pt3,#ph4:hover ~ #pt4,#ph5:hover ~ #pt5{display:block;}
    --></style>

    Si vous souhaitez une commande au clic gauche maintenu, modifiez l'avant dernière ligne ainsi:

    #ph1:active ~ #pt1,#ph2:active ~ #pt2,#ph3:active ~ #pt3,#ph4:active ~ #pt4,#ph5:active ~ #pt5{display:block;}

    Si vous souhaitez une commande au clic, modifiez l'avant dernière ligne ainsi:

    #ph1:focus ~ #pt1,#ph2:focus ~ #pt2,#ph3:focus ~ #pt3,#ph4:focus ~ #pt4,#ph5:focus ~ #pt5{display:block;}

    ************************************************

    Bon amusement; vous pouvez aussi modifier la commande display par un changement d'opacité, par exemple.