Clic et Survol

 

Survolez l'élément haut gauche pour reconstituer l'image; changement d'image au clic sur chaque bouton.

 

 

 

 

 

 

 

 

 

 

---

<p>&nbsp;</p>

<div style="background: linear-gradient(to top, rgb(228, 239, 192) 0%, rgb(171, 189, 115) 100%); border: 6px ridge grey; height: 675px; margin: 50px auto; text-align: left; width: 1200px;">

<p id="exp"><span style="background-color: lime;">Survolez l'élément haut gauche</span> pour reconstituer l'image; changement d'image au clic sur chaque bouton.</p>

<p id="reto">&nbsp;</p>

<input class="ch" id="btna" type="text" />

<p class="ch" id="btnb">&nbsp;</p>

<input class="ch" id="btnc" type="text" />

<p class="ch" id="btnd">&nbsp;</p>

<input class="ch" id="btne" type="text" />

<p class="ch" id="btnf">&nbsp;</p>

<input class="ch" id="btng" type="text" />

<p class="ch" id="btnh">&nbsp;</p>

<input class="ch" id="btnj" type="text" />

<p class="ch" id="btnk">&nbsp;</p>

<p class="qta" id="qt1">&nbsp;</p>

<p class="qta" id="qt2">&nbsp;</p>

<p class="qta" id="qt3">&nbsp;</p>

<p class="qta" id="qt4">&nbsp;</p>

</div>

<style><!--

#exp{position:absolute; z-index:1; width:1200px; height:150px; font-size:22px; text-align:center; transform:translate(0px,330px);} 

.ch{position:absolute; width:40px; height:40px; border-radius:50%;}

#reto{position:absolute; z-index:1; width:40px; height:40px; border-radius:50%;font-size:30px; line-height:40px; text-align:center; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:yellow; transform:translate(300px,10px);}

#btna{z-index:10; border-color:transparent; background:transparent; transform:translate(400px,10px);}

#btnb{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(400px,10px);}

#btnc{z-index:10; border-color:transparent; background:transparent; transform:translate(500px,10px);}

#btnd{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(500px,10px);}

#btne{z-index:10; border-color:transparent; background:transparent; transform:translate(600px,10px);}

#btnf{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(600px,10px);}

#btng{z-index:10; border-color:transparent; background:transparent; transform:translate(700px,10px);}

#btnh{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(700px,10px);}

#btnj{z-index:10; border-color:transparent; background:transparent; transform:translate(800px,10px);}

#btnk{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(800px,10px);}

.qta{position:absolute; z-index:1; width:1200px; height:675px; margin-top:0px; background:url('http://ekladata.com/LJ3RQKt-pDYxKtXRX65tq4FXvfY.jpg'); background-size:1200px 675px; transition:all 1s;}

#qt1{clip-path:polygon(0% 0%, 12% 0%, 40% 40%, 0% 20%);}

#qt2{clip-path:polygon(88% 0%, 100% 0%, 100% 20%, 60% 40%);}

#qt3{clip-path:polygon(60% 60%, 100% 80%, 100% 100%, 88% 100%);}

#qt4{clip-path:polygon(0% 80%, 40% 60%, 12% 100%, 0% 100%);}

#qt1:hover{clip-path:polygon(0% 0%, 51% 0%, 51% 51%, 0% 51%);}

#qt1:hover~#qt2{clip-path:polygon(50% 0%, 100% 0%, 100% 51%, 50% 51%);}

#qt1:hover~#qt3{clip-path:polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);}

#qt1:hover~#qt4{clip-path:polygon(0% 50%, 51% 50%, 50% 100%, 0% 100%);}

.ch:focus{outline:none;}

#btna:focus ~ .qta{background:url('http://ekladata.com/ti8sp0wTL1KWRP1TDHryE-OuKVw.jpg'); background-size:1200px 675px;}

#btnc:focus ~ .qta{background:url('http://ekladata.com/WJpaTDM5A35XysU9adH7D8EgPl0.jpg'); background-size:1200px 675px;}

#btne:focus ~ .qta{background:url('http://ekladata.com/7sLYCc7DCcyvFj7BAG9tLzwjvJk.jpg'); background-size:1200px 675px;}

#btng:focus ~ .qta{background:url('http://ekladata.com/nn-Kt3--D9WTZZ4h2GK2-teSHAM.jpg'); background-size:1200px 675px;}

#btnj:focus ~ .qta{background:url('http://ekladata.com/SLo5lkMPpBWQbSxbWYCk2iKkZy4.jpg'); background-size:1200px 675px;}

--></style>