• Clic multiples

    J'ai proposé, en article, un genre diaporama, avec avancement au clic sur des boutons et coloration au survol d'un autre bouton.

    Le principe d'un montage avec avancement au clic, peut être celui-ci:

    Avancement au clic.


    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.4vh ridge white;"><input id="gh1" type="text" /> <input id="gh2" type="text" /> <input id="gh3" type="text" /> <input id="gh4" type="text" /> <input id="gh5" type="text" /><input id="gh6" type="text" /><input id="gh7" type="text" /><input id="gh8" type="text" />
    <p id="gh10">Avancement au clic.</p>
    </div>
    <hr style="border: 0.4vh double grey;" />
    <p><br />...</p>
    <style><!--
    @import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
    #gh1{position:absolute; z-index:5; width:80vw; height:92vh; background:url('http://ekladata.com/FwFSjIsDPCDdoIVqOwmPGmD-ghE.jpg'); background-size:80vw 92vh; }
    #gh2{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/BsG9KiMmjz-p_D3jG0y2Jp-L9SQ.jpg'); background-size:80vw 92vh; }
    #gh3{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/aCv4sp3dzIoCMvfIMwqRpEN_msc.jpg'); background-size:80vw 92vh; }
    #gh4{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/689gUOPo_cmPDqmCjPQLhll9bbA.jpg'); background-size:80vw 92vh; }
    #gh5{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/omYDhtjUUgu0orjAqLWQoMyuUb8.jpg'); background-size:80vw 92vh; }
    #gh6{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/I7u4J4B-0zgUWIL1JNAi0gftIlU.jpg'); background-size:80vw 92vh; }
    #gh7{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/ovl7SVZFaWCD-sLi91NfSOXCWF0.jpg'); background-size:80vw 92vh; }
    #gh8{position:absolute; z-index:1; width:80vw; height:92vh; background:url('http://ekladata.com/-rMhaQ0S-UmlpGPiElWEvzHRyy8.jpg'); background-size:80vw 92vh; }
    #gh10{position:absolute; z-index:5; text-align:center; font-family: 'Kaushan Script', cursive; font-size:5vh; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(5vw,5vh);}
    #gh1:focus ~ #gh2,#gh2:focus ~ #gh3,#gh3:focus ~ #gh4,#gh4:focus ~ #gh5,#gh5:focus ~ #gh6,#gh6:focus ~ #gh7,#gh7:focus ~ #gh8{z-index:10;}
    --></style>

    Le principe est de placer la première image au premier plan (z-indes:5;) et les autres dessous (z-index:1;).

    Au clic sur la première image, la seconde passe au premier plan (z-index:10;) et ainsi de suite...

    Les dimensions sont ici en adaptatives mais vous pouvez remplacer, par exemple, 80vw par 1050px et 92vh par 647px, pour conserver le rapport 16/9.