-
Exemple 115
Survol puis clic sur chaque bouton.
<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left;">
<input id="gor1" class="gor" type="button" />
<input id="gor2" class="gor" type="button" />
<input id="gor3" class="gor" type="button" />
<input id="gor4" class="gor" type="button" />
<p id="dg"> </p>
</div>
<style><!--
#dg{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/D2HMwzzeMigDcRRjTVaRAU8rAbI.jpg'); background-size:60vw 33.75vw;}
.gor{position:absolute; z-index:2; width:1.5vw; height:2vw; border-radius:50%; border:none; box-shadow:inset -0.4vh -0.4vh 0.6vh black;}
#gor1{transform:translate(55vw,2vw);}
#gor2{transform:translate(55vw,6vw);}
#gor3{transform:translate(55vw,10vw);}
#gor4{transform:translate(55vw,14vw);}
#gor1:hover ~ #dg{background:url('http://ekladata.com/hgp-kEWPOJHdPCW1el8k2DD5HLE.jpg');}
#gor1:focus ~ #dg{background:url('http://ekladata.com/TF1wvOsTO8PeCvaQs1i0iqF14uI.jpg');}
#gor2:hover ~ #dg{background:url('http://ekladata.com/MYrlWweIr9EpZSCAAtMsP541hz0.jpg');}
#gor2:focus ~ #dg{background:url('http://ekladata.com/JOdnyp-xIoE-FjZzu-awNbVQj8k.jpg');}
#gor3:hover ~ #dg{background:url('http://ekladata.com/sAAwOLHGUmTxBmZ5ERbBMND1dow.jpg');}
#gor3:focus ~ #dg{background:url('http://ekladata.com/An7OKpVTiSmeAqijcBSfppx8-FI.jpg');}
#gor4:hover ~ #dg{background:url('http://ekladata.com/1_B-ZyvbjY9vEyx3M0M9Zu1V9t4.jpg');}
#gor4:focus ~ #dg{background:url('http://ekladata.com/Dzf22JrSXd1daWIzQE42Y6SEKk0.jpg');}
--></style>