• 30.12.23

    Toujours pour celles et ceux qui utilisent des images au ratio 4/3 en 800x600px mais au clic ! Pas de javascript.

    Le nombre d'images et donc de boutons est adaptable à vos choix; exemple en 1+5 images.


    <div style="width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/An7Fyg6B_ohRBsBmtn6PPeRTd0g.jpg'); background-size:800px 600px; margin:30px auto; text-align:left;">
    <input id="cd1" class="cd">
    <input id="cd2" class="cd">
    <input id="cd3" class="cd">
    <input id="cd4" class="cd">
    <input id="cd5" class="cd">
    <input id="cd6" class="cd">
    <img id="br1" class="br" src="http://ekladata.com/n_slI4yqNi1rFm38_ZzQrZ28Oys.jpg">
    <img id="br2" class="br" src="http://ekladata.com/cterMSuI8dTtchXFgWT9G33t4T0.jpg">
    <img id="br3" class="br" src="http://ekladata.com/xv5gm0UEcZb1elrcyCN9hkaQAyA.jpg">
    <img id="br4" class="br" src="http://ekladata.com/_HmylnKujtz7nxNkPKuib9oEUiQ.jpg">
    <img id="br5" class="br" src="http://ekladata.com/EdgzEiOO3XcszXBDnMrHvEx79Is.jpg">
    </div>

    <style><!--
    .cd{position:absolute; z-index:5; width:800px; height:600px; background:transparent; border:none;}
    .br{position:absolute; z-index:1; width:800px; height:600px; opacity:0;}
    #cd1{z-index:8;}
    #cd1:focus ~ #cd2,#cd2:focus ~ #cd3,#cd3:focus ~ #cd4,#cd4:focus ~ #cd5,#cd5:focus ~ #cd6{z-index:10;}
    #cd1:focus ~ #br1,#cd2:focus ~ #br2,#cd3:focus ~ #br3,#cd4:focus ~ #br4,#cd5:focus ~ #br5{opacity:1;}
    --></style>

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

    Le principe est de positionner la première image en fond du cadre.

    On positionne ensuite les boutons (cd1 à cd6); le premier bouton (cd1) est positionné en premier plan (z-index:8;) et les autres en dessous (z-index:5;}

    Souvenons nous que, pour qu'un bouton actionne un autre élément (ici, une image), il faut que le programme trouve d'abord le bouton puis l'élément à animer.

    Le premier bouton cliqué fait passer le second en premier plan (z-index:10;} et ainsi de suite.

    Le dernier bouton (cd6) remet le montage à zéro.

    Les images sont empilées en dessous (z-index:1;) et transparentes (opacity:0;)

    Chaque bouton est associé à une à une image (cd1 à br1, cd2 à br2 ...) et un clic sur un bouton fait devenir opaque l'image correspondante (opacity:1;).