11.04.2024

Montage en 1100x618px pour 7 images au ratio 16/9

Survol image et changement d'image au clic sur chaque bouton.

<p>Survol image et changement d'image au clic sur chaque bouton.</p>
<div style="width: 1100px; height: 618px; margin: 50px auto; text-align: left;">
<p id="cde">&nbsp;</p>
<input id="mg1" class="mg" type="text" /> <input id="mg2" class="mg" type="text" /> <input id="mg3" class="mg" type="text" /> <input id="mg4" class="mg" type="text" /> <input id="mg5" class="mg" type="text" /> <input id="mg6" class="mg" type="text" /> <input id="mg0" class="mg" type="text" />
<p id="gh" class="fd">&nbsp;</p>
<p id="gb" class="fd">&nbsp;</p>
<p id="dh" class="fd">&nbsp;</p>
<p id="db" class="fd">&nbsp;</p>
</div>
<style><!--
.mg{position:absolute; width:50px; height:20px; background:coral; box-shadow:inset 3px 3px 6px black, inset -3px -3px 6px white;}
#mg1{transform:translate(300px,-35px);}
#mg2{transform:translate(370px,-35px);}
#mg3{transform:translate(440px,-35px);}
#mg4{transform:translate(510px,-35px);}
#mg5{transform:translate(580px,-35px);}
#mg6{transform:translate(650px,-35px);}
#mg0{transform:translate(720px,-35px);}
#cde{position:absolute; z-index:10; width:1100px; height:618px;}
.fd{position:absolute; z-index:1; width:1100px; height:618px; background:url('http://ekladata.com/Th8bUfvsXwMbiTVBWnCBm9IRQJM@1100x618.jpg'); transition:all 2s;}
#gh{clip-path:polygon(0% 0%, 10% 0%, 50% 50%, 0% 18%); background-size:1100px 618px;}
#gb{clip-path:polygon(0% 82%, 50% 50%, 10% 100%, 0% 100%); background-size:1100px 618px;}
#dh{clip-path:polygon(90% 0%, 100% 0%, 100% 18%, 50% 50%); background-size:1100px 618px;}
#db{clip-path:polygon(50% 50%, 100% 82%, 100% 100%, 90% 100%); background-size:1100px 618px;}
#cde:hover~#gh,#cde:hover~#gb,#cde:hover~#dh,#cde:hover~#db{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
.mg:focus{background:lime;}
#mg1:focus ~ .fd{background:url('http://ekladata.com/8AEj_c9hzvP77S-UcRlhNj4qDLY@1100x618.jpg');}
#mg2:focus ~ .fd{background:url('http://ekladata.com/-zadQh0gK5tKCQt1VaoeUujNa_E@1100x618.jpg');}
#mg3:focus ~ .fd{background:url('http://ekladata.com/ms00fCCy0pyqFSPhQfT8ixSaHQc@1100x618.jpg');}
#mg4:focus ~ .fd{background:url('http://ekladata.com/cVwoPyrRCGCnZtjDHb7iQN9bPbE@1100x618.jpg');}
#mg5:focus ~ .fd{background:url('http://ekladata.com/6WUT--LIDTioMjsA_bBNGOdlCt8@1100x618.jpg');}
#mg6:focus ~ .fd{background:url('http://ekladata.com/sbNFUvxpOVKz9NiiptuE0ly6eZ8@1100x618.jpg');}
--></style>