• Clic en kit

    Le javascript permet, entre autre, de faire avancer ou reculer l'affichage des images, dans un diaporama; il est un peu partout sur nos blogs mais de moins en moins recommandé, du fait de failles de sécurité.
    J'ai proposé des montages en CSS, avec changement d'image au clic; sur une image, pas de souci particulier comme le changement de couleur ci-dessous

    Clic



    <div style="width: 40vw; height: 22.5vw; float: left;"><input id="xx1" type="text" />
    <p id="xy1">Clic</p>
    </div>
    <div style="width: 40vw; height: 22.5vw; float: left; text-align: center; font-size: 1vw;">texte</div>
    <style><!--
    #xx1{position:absolute; z-index:5; width:40vw; height:22.5vw; border:none; background:transparent;}
    #xy1{position:absolute; z-index:1; width:40vw; height:22.5vw; text-align: center; font-size: 2vw; background:yellow; transition:all 1s linear;}
    #xx1:focus ~ #xy1{background:green;}
    --></style>

    Un clic annule le clic précédent: dans notre exemple, un second clic hors montage annule l'action du premier clic.

    Si nous voulons faire défiler plusieurs images, par exemple, le bouton au clic doit être en premier plan pour être actif.

    Ceci signifie que le premier clic, sur lequel vous avez cliqué, doit se mettre en retrait pour que le clic suivant passe à son tour en premier plan: nous devons donc écrire une ligne pour que le clic anime l'image et une seconde ligne pour qu'il commande au bouton suivant de passer au premier plan.

    Si nous voulons animer plusieurs images, il faudra écrire autant de lignes que d'images !

    Avancement au clic1.

    Avancement au clic2.

    Avancement au clic3.

    Avancement au clic4.

    <div style="width: 40vw; height: 22.5vw; float: left;"><input id="wx1" class="wx" type="text"/><input id="wx2" class="wx" type="text"/><input id="wx3" class="wx" type="text"/><input id="wx4" class="wx" type="text"/>
    <p id="wy1" class="wy">Avancement au clic1.</p>
    <p id="wy2" class="wy">Avancement au clic2.</p>
    <p id="wy3" class="wy">Avancement au clic3.</p>
    <p id="wy4" class="wy">Avancement au clic4.</p>
    </div>
    <style><!--
    .wx{position:absolute; width:40vw; height:22.5vw; text-align: center; font-size: 2vw; border:none; background:transparent;}
    #wx1{z-index:9;}
    #wx2{z-index:8;}
    #wx3{z-index:8;}
    #wx4{z-index:8;}
    #wy1{position:absolute; z-index:2; width:40vw; height:22.5vw; text-align: center; font-size: 2vw; background:yellow; transition:all 1s linear;}
    #wy2{position:absolute; z-index:2; width:40vw; height:22.5vw; text-align: center; font-size: 2vw; background:green; transition:all 1s linear; opacity:0;}
    #wy3{position:absolute; z-index:2; width:40vw; height:22.5vw; text-align: center; font-size: 2vw; background:pink; transition:all 1s linear; opacity:0;}
    #wy4{position:absolute; z-index:2; width:40vw; height:22.5vw; text-align: center; font-size: 2vw; background:coral; transition:all 1s linear; opacity:0;}
    #wx1:focus ~ #wx2{z-index:10;}
    #wx2:focus ~ #wx3{z-index:10;}
    #wx3:focus ~ #wx4{z-index:10;}
    #wx1:focus ~ #wy2{opacity:1;}
    #wx2:focus ~ #wy3{opacity:1;}
    #wx3:focus ~ #wy4{opacity:1;}}
    --></style>

    Comme dans le cas du survol, l'élément survolé ou ici cliqué doit être écrit en premier dans le code, quitte à modifier sa position dans l'article ensuite; le programme doit trouver l'élément survolé ou cliqué avant l'élément animé.

    L'élément 1, écrit en premier, peut animer l'élément 2, écrit ensuite; l'élément 2 ne peut animer l'élément 1.

    Dans ce code, vous trouvez la liste des boutons, écrits en premier avec le premier bouton en premier plan (z-index:9) et la liste des paragraphes, le premier étant opaque et les suivants, transparents et chaque bouton commande un paragraphe, par changement d'opacité ici mais vous pouvez adopter une autre transition.