• Zone réactive 3, au clic.

    Les pages précédentes étant au survol d'un bouton transparent, nous pouvons avoir une action au clic; On peut avoir un bouton X  ou cliquer n'importe où pour revenir en position de départ.

    Clic sur certaines gouttes d'eau: 6... un indice: votre curseur change de forme au survol:  bonne recherche !

     

     

     

     

     

     


    <div style="width: 60vw; height: 69vh; margin: 1vh auto; border: 0.3vw ridge white; background: url('http://ekladata.com/BnImEbxO7dB-f_PVwRWXCWL_bYM.jpg'); background-size: 100% 100%;"><input id="x0" type="text" value="X" /> <input id="x1" type="text" /> <input id="x2" type="text" /> <input id="x3" type="text" /> <input id="x4" type="text" /> <input id="x5" type="text" /> <input id="x6" type="text" />
    <p id="mg1">&nbsp;</p>
    <p id="mg2">&nbsp;</p>
    <p id="mg3">&nbsp;</p>
    <p id="mg4">&nbsp;</p>
    <p id="mg5">&nbsp;</p>
    <p id="mg6">&nbsp;</p>
    </div>

    <style><!--
    #x0{position:absolute; z-index:10; width:2vw; height:2vw; color:red!important; text-align:center; text-shadow:0.1vw 0.1vw black; font-size:2vw; line-height:2vw; transform:translate(57.5vw,0vh); background:none;}
    #x1{position:absolute; z-index:2; width:2vw; height:2vw; transform:translate(21vw,4.5vh); background:none; border:none;}
    #x2{position:absolute; z-index:2; width:2vw; height:2vw; transform:translate(13vw,30vh); background:none; border:none;}
    #x3{position:absolute; z-index:2; width:2vw; height:2vw; transform:translate(25vw,43vh); background:none; border:none;}
    #x4{position:absolute; z-index:2; width:3vw; height:2.5vw; transform:translate(33.5vw,50vh); background:none; border:none;}
    #x5{position:absolute; z-index:2; width:3vw; height:3vw; transform:translate(38vw,20.5vh); background:none; border:none;}
    #x6{position:absolute; z-index:2; width:4vw; height:3vw; transform:translate(48vw,31vh); background:none; border:none;}
    #mg1{position:absolute; z-index:1; width:0vw; height:0vw; transform:translate(22vw,5.5vh); background:url('http://ekladata.com/9s-tH3DBio9bDGgziCfG9b-qbAY.jpg'); background-size:100% 100%; transition:all 1s linear;}
    #mg2{position:absolute; z-index:1; width:0vw; height:0vw; transform:translate(14vw,31vh); background:url('http://ekladata.com/UJDgE4vO1UyyIOXTjtphqF_fIXk.jpg'); background-size:100% 100%; transition:all 1s linear;}
    #mg3{position:absolute; z-index:1; width:0vw; height:0vw; transform:translate(26vw,44vh); background:url('http://ekladata.com/gWhna9W94NQ0azoDHBddWrmu8SM.jpg'); background-size:100% 100%; transition:all 1s linear;}
    #mg4{position:absolute; z-index:1; width:0vw; height:0vw; transform:translate(34.5vw,51vh); background:url('http://ekladata.com/0Rl4HZHk9aPiX--XudeRtagJ0TU.jpg'); background-size:100% 100%; transition:all 1s linear;}
    #mg5{position:absolute; z-index:1; width:0vw; height:0vw; transform:translate(39vw,22vh); background:url('http://ekladata.com/6O2zkPBuSRfUX44MR2ASkkwpO-Q.jpg'); background-size:100% 100%; transition:all 1s linear;}
    #mg6{position:absolute; z-index:1; width:0vw; height:0vw; transform:translate(50vw,33vh); background:url('http://ekladata.com/iwgjXNG7Bc1ikbrquwMYbIDtZNM.jpg'); background-size:100% 100%; transition:all 1s linear;}
    #x1:focus ~ #mg1,#x2:focus ~ #mg2,#x3:focus ~ #mg3,#x4:focus ~ #mg4,#x5:focus ~ #mg5,#x6:focus ~ #mg6{width:60vw; height:69vh; transform:translate(0vw,0vh);}
    --></style>


    Chaque bouton anime une image particulière, qui mesure 0vw par 0vh et est donc invisible, placée sous le bouton (ou ailleurs !); le clic sur le bouton la fait s'agrandir à la taille du montage et positionnée en haut/gauche.