-
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"> </p>
<p id="mg2"> </p>
<p id="mg3"> </p>
<p id="mg4"> </p>
<p id="mg5"> </p>
<p id="mg6"> </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.