Var.Clic et SV
Survolez l'élément coloré haut gauche pour reconstituer l'image; changement d'image au clic sur chaque bouton.
<div style="background: linear-gradient(to top, #e4efc0 0%, #abbd73 100%); border: 6px ridge grey; height: 675px; margin: 50px auto; text-align: left; width: 1200px;">
<p id="tt"><span style="background-color: lime;">Survolez l'élément coloré haut gauche</span> pour reconstituer l'image; changement d'image au clic sur chaque bouton.</p>
<p id="renv"> </p>
<input id="cda" class="cd" type="text" />
<p id="cdb" class="cd"> </p>
<input id="cdc" class="cd" type="text" />
<p id="cdd" class="cd"> </p>
<input id="cde" class="cd" type="text" />
<p id="cdf" class="cd"> </p>
<input id="cdg" class="cd" type="text" />
<p id="cdh" class="cd"> </p>
<input id="cdj" class="cd" type="text" />
<p id="cdk" class="cd"> </p>
<p id="qrt1" class="qrta"> </p>
<p id="qrt2" class="qrta"> </p>
<p id="qrt3" class="qrta"> </p>
<p id="qrt4" class="qrta"> </p>
</div>
<style><!--
#tt{position:absolute; z-index:1; width:1200px; height:150px; font-size:22px; text-align:center; transform:translate(0px,330px);}
.cd{position:absolute; width:40px; height:40px; border-radius:50%;}
#renv{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,140px);}
#cda{z-index:10; border-color:transparent; background:transparent; transform:translate(400px,150px);}
#cdb{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(400px,150px);}
#cdc{z-index:10; border-color:transparent; background:transparent; transform:translate(500px,150px);}
#cdd{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(500px,150px);}
#cde{z-index:10; border-color:transparent; background:transparent; transform:translate(600px,150px);}
#cdf{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(600px,150px);}
#cdg{z-index:10; border-color:transparent; background:transparent; transform:translate(700px,150px);}
#cdh{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(700px,150px);}
#cdj{z-index:10; border-color:transparent; background:transparent; transform:translate(800px,150px);}
#cdk{z-index:1; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:coral; transform:translate(800px,150px);}
.qrta{position:absolute; z-index:1; width:1200px; height:675px; margin-top:0px; background:url('http://ekladata.com/gWaD9Xd2cn44w5t26UU73itVQvY.jpg'); background-size:1200px 675px; filter:grayscale(1);transition:all 1s;}
#qrt1{clip-path:polygon(0% 0%, 40% 0%, 5% 10%, 0% 40%); filter:grayscale(0);}
#qrt2{clip-path:polygon(60% 0%, 100% 0%, 100% 40%, 95% 10%);}
#qrt3{clip-path:polygon(95% 90%, 100% 60%, 100% 100%, 60% 100%);}
#qrt4{clip-path:polygon(0% 60%, 5% 90%, 40% 100%, 0% 100%);}
#qrt1:hover{clip-path:polygon(0% 0%, 51% 0%, 51% 51%, 0% 51%);}
#qrt1:hover~#qrt2{clip-path:polygon(50% 0%, 100% 0%, 100% 51%, 50% 51%);filter:grayscale(0);}
#qrt1:hover~#qrt3{clip-path:polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);filter:grayscale(0);}
#qrt1:hover~#qrt4{clip-path:polygon(0% 50%, 51% 50%, 50% 100%, 0% 100%);filter:grayscale(0);}
.cd:focus{outline:none;}
#cda:focus ~ .qrta{background:url('http://ekladata.com/eCPxLnSAPONMsgxbP2L_8bZuXwI.jpg'); background-size:1200px 675px;}
#cdc:focus ~ .qrta{background:url('http://ekladata.com/WJs1DBbIru10Jr07LlzX54VqkA8.jpg'); background-size:1200px 675px;}
#cde:focus ~ .qrta{background:url('http://ekladata.com/-hOtyTR1aIGrVL06qXeKDUe031Q.jpg'); background-size:1200px 675px;}
#cdg:focus ~ .qrta{background:url('http://ekladata.com/CQJcYjQVqBgcja2BZUWdqgCq10c.jpg'); background-size:1200px 675px;}
#cdj:focus ~ .qrta{background:url('http://ekladata.com/d2V5ElK5JvrnG-dor9K5okS8MX0.jpg'); background-size:1200px 675px;}
--></style>