• Un seul bouton clic

    Pour faire un changement d'image ou de cadre au clic sur un bouton, nous pouvons placer un bouton par image et un clic sur chaque bouton anime l'image correspondante.

    Nous pouvons aussi ne placer visuellement qu'un seul bouton, en empilant les boutons similaires et les images:

    le premier bouton est au premier plan z-index:10; et les autres en dessous z-index:1;

    la première image est au premier plan z-index:3; et les autres en dessous z-index:1;

    Lorsque nous cliquons sur le bouton n°1, il fait passer l'image n°2 en z-index:8; au dessus de l'image 1 et, en même temps (formule politique !), il fait passer le bouton n°2 au premier plan z-index:15;

    Ainsi, le bouton n°2 peut être cliqué et animer l'image n°3 et le bouton n°3, etc, etc...

    Voici un exemple avec des cadres de couleur.

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 0.2vh auto; border: 0.2vh solid black;"><input id="bt1" class="bt" type="text" value="clic" /><input id="bt2" class="bt" type="text" value="clic" /><input id="bt3" class="bt" type="text" value="clic" /><input id="bt4" class="bt" type="text" value="clic" />
    <p id="p0" class="p">&nbsp;</p>
    <p id="p1" class="p">&nbsp;</p>
    <p id="p2" class="p">&nbsp;</p>
    <p id="p3" class="p">&nbsp;</p>
    <p id="p4" class="p">&nbsp;</p>
    </div>
    <style><!--
    .bt{position:absolute; width:3vw; height:2vw; background:#00ffff!important;font-size:1.5vw; text-align:center; line-height:2vw; background:rgba(0,0,0,0.5); color:white; transform:translate(56vw,0vw);}
    #bt1{z-index:10;}
    #bt2{z-index:1;}
    #bt3{z-index:1;}
    #bt4{z-index:1;}
    .p{position:absolute; width:60vw; height:33.75vw;}
    #p0{z-index:3; background:pink;}
    #p1{z-index:1; background:yellow;}
    #p2{z-index:1; background:lime;}
    #p3{z-index:1; background:red;}
    #p4{z-index:1; background:green;}

    #bt1:focus ~ #p1,#bt2:focus ~ #p2,#bt3:focus ~ #p3,#bt4:focus ~ #p4{z-index:8;}
    #bt1:focus ~ #bt2,#bt2:focus ~ #bt3,#bt3:focus ~ #bt4{z-index:15;}
    --></style>

    Selon ce principe, nous pouvons donner aux boutons, les dimensions du montage et les rendre invisibles; ainsi, en indiquant "avancement au clic", chaque bouton invisible animera une image et un autre bouton invisible.

    Visuellement, en cliquant sur une image, la suivante s'affichera.