Exemple 128

Variante du code précédent; code un peu complexe car oblige à la répétition d'attributs et d'adresses.

7 images au ratio 16/9.

Survol de la vignette.
Changement d'image par un clic sur chaque bouton.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 1vh auto; text-align: left;"><input id="chgt1" class="chgt" type="text" value="A" /> <input id="chgt2" class="chgt" type="text" value="B" /> <input id="chgt3" class="chgt" type="text" value="C" /> <input id="chgt4" class="chgt" type="text" value="D" /> <input id="chgt5" class="chgt" type="text" value="E" /> <input id="chgt6" class="chgt" type="text" value="F" /> <input id="chgt7" class="chgt" type="text" value="G" />
<p id="pz0">&nbsp;</p>
<p id="cde">&nbsp;</p>
<p id="pz1" class="pz">&nbsp;</p>
<p id="pz2" class="pz">&nbsp;</p>
<p id="pz3" class="pz">&nbsp;</p>
<p id="pz4" class="pz">&nbsp;</p>
<p id="pz5" class="pz">&nbsp;</p>
<p id="pz6" class="pz">&nbsp;</p>
<p id="pz7" class="pz">&nbsp;</p>
<p id="pz8" class="pz">&nbsp;</p>
<p id="pz9" class="pz">&nbsp;</p>
</div>
<p id="exp">Survol de la vignette.<br />Changement d'image par un clic sur chaque bouton.</p>

<style><!--
#pz0{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background:url('http://ekladata.com/j47bu5NM0ufoV382dky85QvPttE.jpg'); background-size:60vw 33.75vw; filter:grayscale(1); opacity:0.3;}
.chgt{position:absolute; z-index:5; width:2.5vw; height:2.5vw; border-radius:50%; text-align:center; line-height:2.5vw; font-size:2vw; color:coral!important; text-shadow:0.1vh 0.1vh black;}
#chgt1{transform:translate(57vw,2vw);}
#chgt2{transform:translate(57vw,5vw);}
#chgt3{transform:translate(57vw,8vw);}
#chgt4{transform:translate(57vw,11vw);}
#chgt5{transform:translate(57vw,14vw);}
#chgt6{transform:translate(57vw,17vw);}
#chgt7{transform:translate(57vw,20vw);}
#cde{position:absolute; z-index:10; width:20vw; height:11.25vw; border:0.2vh solid red; transform:translate(0vw, 0vw);}
.pz{position:absolute; width:60vw; height:33.75vw; background:url('http://ekladata.com/j47bu5NM0ufoV382dky85QvPttE.jpg'); background-size:60vw 33.75vw; opacity:0;}
#pz1{z-index:1; clip-path:polygon(0vw 0vw, 20vw 0vw, 20vw 11.25vw,0vw 11.25vw); opacity:1; transition:all 0.5s linear 0s;}
#pz2{z-index:1; clip-path:polygon(20vw 0vw, 40vw 0vw, 40vw 11.25vw,20vw 11.25vw); transition:all 0.5s linear 0.2s;}
#pz3{z-index:1; clip-path:polygon(40vw 0vw, 60vw 0vw, 60vw 11.25vw,40vw 11.25vw); transition:all 0.5s linear 0.4s;}
#pz4{z-index:1; clip-path:polygon(60vw 11.25vw, 60vw 22.5vw, 40vw 22.5vw,40vw 11.25vw); transition:all 0.5s linear 0.6s;}
#pz5{z-index:1; clip-path:polygon(20vw 11.25vw, 40vw 11.25vw, 40vw 22.5vw,20vw 22.5vw); transition:all 0.5s linear 0.8s;}
#pz6{z-index:1; clip-path:polygon(0vw 11.25vw, 20vw 11.25vw, 20vw 22.5vw,0vw 22.5vw); transition:all 0.5s linear 1s;}
#pz7{z-index:1; clip-path:polygon(0vw 22.5vw, 20vw 22.5vw, 20vw 33.75vw,0vw 33.75vw); transition:all 0.5s linear 1.2s;}
#pz8{z-index:1; clip-path:polygon(20vw 22.5vw, 40vw 22.5vw, 40vw 33.75vw,20vw 33.75vw); transition:all 0.5s linear 1.4s;}
#pz9{z-index:1; clip-path:polygon(40vw 22.5vw, 60vw 22.5vw, 60vw 33.75vw,40vw 33.75vw); transition:all 0.5s linear 1.6s;}
#cde:hover ~ #pz1,#cde:hover ~ #pz2,#cde:hover ~ #pz3,#cde:hover ~ #pz4,#cde:hover ~ #pz5,#cde:hover ~ #pz6,#cde:hover ~ #pz7,#cde:hover ~ #pz8,#cde:hover ~ #pz9{opacity:1;}
#cde:hover{border:none;}
#cde:hover ~ #pz1,#cde:hover ~ #pz2,#cde:hover ~ #pz3,#cde:hover ~ #pz4,#cde:hover ~ #pz5,#cde:hover ~ #pz6,#cde:hover ~ #pz7,#cde:hover ~ #pz8,#cde:hover ~ #pz9{z-index:8;}
#exp{width:60vw; margin:1vh auto; text-align:center; font-size:1.2vw;}
.chgt:focus{color:lime!important;}
#chgt1:focus ~ .pz{background:url('http://ekladata.com/j47bu5NM0ufoV382dky85QvPttE.jpg'); background-size:60vw 33.75vw;}
#chgt2:focus ~ .pz{background:url('http://ekladata.com/x7Qk_eGOKVpGmZU-oBLc0cwwlFY.jpg'); background-size:60vw 33.75vw; }
#chgt3:focus ~ .pz{background:url('http://ekladata.com/VBrKxFndBDZjdKnRJ-ty_NusGFM.jpg'); background-size:60vw 33.75vw;}
#chgt4:focus ~ .pz{background:url('http://ekladata.com/Nr8ATCEjFyxj8RJjYw8uwPuo0M0.jpg'); background-size:60vw 33.75vw;}
#chgt5:focus ~ .pz{background:url('http://ekladata.com/_VeBGDD13DIUxI3Dc7DJcOKjl24.jpg'); background-size:60vw 33.75vw;}
#chgt6:focus ~ .pz{background:url('http://ekladata.com/tMw6BRFIQF7WNDjnuxuC-TinIkg.jpg'); background-size:60vw 33.75vw;}
#chgt7:focus ~ .pz{ background:url('http://ekladata.com/7UibJuIecy8E6Kj8ojh6qwM6xjI.jpg'); background-size:60vw 33.75vw;}
#chgt1:focus ~ #pz0{background:url('http://ekladata.com/j47bu5NM0ufoV382dky85QvPttE.jpg'); background-size:60vw 33.75vw;}
#chgt2:focus ~ #pz0{background:url('http://ekladata.com/x7Qk_eGOKVpGmZU-oBLc0cwwlFY.jpg');background-size:60vw 33.75vw; }
#chgt3:focus ~ #pz0{background:url('http://ekladata.com/VBrKxFndBDZjdKnRJ-ty_NusGFM.jpg'); background-size:60vw 33.75vw;}
#chgt4:focus ~ #pz0{background:url('http://ekladata.com/Nr8ATCEjFyxj8RJjYw8uwPuo0M0.jpg'); background-size:60vw 33.75vw;}
#chgt5:focus ~ #pz0{background:url('http://ekladata.com/_VeBGDD13DIUxI3Dc7DJcOKjl24.jpg'); background-size:60vw 33.75vw;}
#chgt6:focus ~ #pz0{background:url('http://ekladata.com/tMw6BRFIQF7WNDjnuxuC-TinIkg.jpg'); background-size:60vw 33.75vw;}
#chgt7:focus ~ #pz0{background:url('http://ekladata.com/7UibJuIecy8E6Kj8ojh6qwM6xjI.jpg'); background-size:60vw 33.75vw;}
--></style>