• 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">&nbsp;</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>