• 22.10.2024

    Il me semble que ce genre de code est plus simple que celui où je place des boutons invisibles sur chaque élément. 

    Le principe est que chaque clic sur un élément fait remonter en premier plan l"élément "reclic" qui permet de revenir au départ par un clic.

    Images déjà publiées ... désolé !

    Clic sur chaque section pour l'agrandir puis clic sur l'image agrandie pour la réduire.

     


    <div style="position: relative; overflow: hidden; width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge grey;">
    <input id="vc1" class="vc" src="http://ekladata.com/C4wJFt-SfFhYVXGhmBL7a2ZoRBY.jpg" type="image" />
    <input id="vc2" class="vc" src="http://ekladata.com/B1MdbhLOTmNbk5IWcr_UnnchQ_g.jpg" type="image" />
    <input id="vc3" class="vc" src="http://ekladata.com/nLT_9kfw8eSvcWe783VymiPsW5k.jpg" type="image" />
    <input id="vc4" class="vc" src="http://ekladata.com/va1jDHU1fn4S6USE8bP4ipTjbwI.jpg" type="image" />
    <input id="vc5" class="vc" src="http://ekladata.com/WsQ2rDHLXC_wNpTcz8qmlmVy6cU.jpg" type="image" />
    <input id="vc6" class="vc" src="http://ekladata.com/uhWj9dPgCB3rMUUg2nkTpfc925c.jpg" type="image" />
    <input id="vc7" class="vc" src="http://ekladata.com/kDGrNl5Omk0NQeJ0K3FTycCFz8o.jpg" type="image" />
    <input id="vc8" class="vc" src="http://ekladata.com/HUVDmts9UmI8H9pdNA5DpayYZis.jpg" type="image" />
    <p id="comm">Clic sur chaque section pour l'agrandir puis clic sur l'image agrandie pour la r&eacute;duire.</p>
    <p id="reclic">&nbsp;</p>
    </div>
    <style><!--
    .vc{position:absolute; width:1200px; height:675px; border:6px ridge white; margin-top:0px; filter:hue-rotate(180deg);transition:all 1s;}
    #vc1{z-index:10; box-sizing:border-box; transform:translate(-600px, -390px) rotate(-30deg);}
    #vc2{z-index:9; box-sizing:border-box; transform:translate(600px, -400px) rotate(30deg);}
    #vc3{z-index:8; box-sizing:border-box; transform:translate(600px, 380px) rotate(-30deg);}
    #vc4{z-index:7; box-sizing:border-box; transform:translate(-600px, 400px) rotate(29deg);}
    #vc5{z-index:6; box-sizing:border-box; transform:translate(-880px, 0px) rotate(0deg);}
    #vc6{z-index:5; box-sizing:border-box; transform:translate(0px, -530px) rotate(0deg);}
    #vc7{z-index:4; box-sizing:border-box; transform:translate(880px, 0px) rotate(0deg);}
    #vc8{z-index:3; box-sizing:border-box; transform:translate(0px, 520px) rotate(0deg);}
    #comm{position:absolute; z-index:2; width:500px; height:130px; background:LightBlue; border:4px ridge grey; font-size:25px; text-align:center; transform:translate(340px,250px);}
    #reclic{position:absolute; z-index:1; width:1200px; height:675px; transform:translate(0px,0px);}
    #vc1:focus ~ #reclic,#vc2:focus ~ #reclic,#vc3:focus ~ #reclic,#vc4:focus ~ #reclic,#vc5:focus ~ #reclic,#vc6:focus ~ #reclic,#vc7:focus ~ #reclic,#vc8:focus ~ #reclic{z-index:15;}
    #vc1:focus,#vc2:focus,#vc3:focus,#vc4:focus,#vc5:focus,#vc6:focus,#vc7:focus,#vc8:focus{z-index:11; transform:translate(0px,0px) rotate(0deg); filter:hue-rotate(0deg);}
    --></style>