• Diapo au clic

    Un code on ne plus guère plus simple pour un diapo au clic, ici avec 8 images au ratio 16/9, en 1200x675px, mais vous pouvez faire ce que vous voulez. 

    L'inconvénient est qu'il faut mettre des images "horizontales", le mélange avec des verticales nécessitant une préparation en amont.

    Le principe est de placer chaque image dans un élément cliquable et que chaque clic fait remonter au premier plan l'élément suivant.


    <div style="width:1200px; height:675px; border:8px ridge grey; margin:50px auto; text-align:left;">
    <input id="cva" src="http://ekladata.com/ykHk5ZaY-Q5_cdgTTLr4UTPD3p8.jpg" type="image" />
    <input id="cvb" src="http://ekladata.com/963hsOClJlR1pVdEkxXCZZsHNj8.jpg" type="image" />
    <input id="cvc" src="http://ekladata.com/KMO_P5BP5EBDOTbRFxXISkpaDNo.jpg" type="image" />
    <input id="cvd" src="http://ekladata.com/2fPBSdfsy8FJ4ZjYgOU1LVB9Z00.jpg" type="image" />
    <input id="cve" src="http://ekladata.com/3DQl0UOcd0xnRjL2m3nUvd37Uoo.jpg" type="image" />
    <input id="cvf" src="http://ekladata.com/rinTLvxWgU4o6wN2el7SYjOxC8I.jpg" type="image" />
    <input id="cvg" src="http://ekladata.com/FT7HEvkDj5iY7I9fZ2al8EDan0U.jpg" type="image" />
    <input id="cvh" src="http://ekladata.com/vGS4wfga64Ae5c7km_JlG2bQ67I.jpg" type="image" />
    </div>
    <style><!--
    #cva{position:absolute; z-index:5; width:1200px; height:675px; border:none;}
    #cvb,#cvc,#cvd,#cve,#cvf,#cvg,#cvh{position:absolute; z-index:1; width:1200px; height:675px; border:none;}
    #cva:focus ~ #cvb,#cvb:focus ~ #cvc,#cvc:focus ~ #cvd,#cvd:focus ~ #cve,#cve:focus ~ #cvf,#cvf:focus ~ #cvg,#cvg:focus ~ #cvh{z-index:10;}
    --></style>