Art.16B.5.21

7 images au ratio 16/9.

<div style="width: 1000px; height: 562px; margin: 10px auto; text-align: left; background: rgba(30,30,10,1);"><input id="dim1" class="dim" type="text" /> <input id="dim2" class="dim" type="text" /> <input id="dim3" class="dim" type="text" /> <input id="dim4" class="dim" type="text" /> <input id="dim5" class="dim" type="text" /> <input id="dim6" class="dim" type="text" />
<p id="fg">Survol partie de droite pour agrandir; Clic bouton pour changer d'image.</p>
<p id="lac1" class="lac">&nbsp;</p>
<p id="lac2" class="lac">&nbsp;</p>
<p id="lac3" class="lac">&nbsp;</p>
</div>

<style><!--
.dim{position:absolute; z-index:3; width:25px; height:25px; border-radius:50%;}
#dim1{transform:translate(950px,100px);}
#dim2{transform:translate(950px,150px);}
#dim3{transform:translate(950px,200px);}
#dim4{transform:translate(950px,250px);}
#dim5{transform:translate(950px,300px);}
#dim6{transform:translate(950px,350px);}
#fg{position:absolute; z-index:1; width:850px; font-size:20px; color:white; transform:translate(150px,0px);}
.lac{position:absolute; z-index:1; width:1000px; height:562px; background:url('http://ekladata.com/-0EdIJHUa927oVF0T2elMS6kJuY.jpg'); background-size:1000px 562px; transition:all 1s;}
#lac1{clip-path:polygon(10% 5%, 40% 10%, 40% 90%,10% 95%);}
#lac2{clip-path:polygon(41% 10.5%, 70% 16%, 70% 84%,41% 89.5%);}
#lac3{clip-path:polygon(71% 16%, 90% 19.5%, 90% 79.5%,71% 83.5%);}
#lac3:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%);}
#dim1:focus ~ .lac{background:url('http://ekladata.com/_Fpywbto0btsYYZjCDsYf2uj3UM.jpg'); background-size:1000px 562px;}
#dim2:focus ~ .lac{background:url('http://ekladata.com/ll9NWfWLjmEIWhQZRQudVumGZJQ.jpg'); background-size:1000px 562px;}
#dim3:focus ~ .lac{background:url('http://ekladata.com/5z5CR4CFPb3Ok8Zrk0zIlIxDZBE.jpg'); background-size:1000px 562px;}
#dim4:focus ~ .lac{background:url('http://ekladata.com/RAcsJiFWIuJF67ybKX_1-DO1Oug.jpg'); background-size:1000px 562px;}
#dim5:focus ~ .lac{background:url('http://ekladata.com/IbgQ0JuYBl24P9seb2-Y9zc1QKU.jpg'); background-size:1000px 562px;}
#dim6:focus ~ .lac{background:url('http://ekladata.com/AO_ZwPEFon_xa-fEhsyopk4fp1Q.jpg'); background-size:1000px 562px;}
--></style>