• Plein écran 15

    Ce code s'adapte à votre écran.


    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/rWM-ofhNqrKPRPqLeuNUyqSr1kQ.jpg'); background-size: cover; text-align: left;"><input id="stm1" class="stm" type="button" value="1" /> <input id="stm2" class="stm" type="button" value="2" /> <input id="stm3" class="stm" type="button" value="3" /> <input id="stm4" class="stm" type="button" value="4" /> <input id="stm5" class="stm" type="button" value="5" /> <input id="stm6" class="stm" type="button" value="6" /> <input id="stm7" class="stm" type="button" value="7" /> <input id="stm8" class="stm" type="button" value="8" /> <input id="stm9" class="stm" type="button" value="9" /> <img id="mg1" class="mg" src="http://ekladata.com/pWm4kUTIMwCl0DoRObQgMps2LD8.jpg" alt="" /> <img id="mg2" class="mg" src="http://ekladata.com/IrJNoftruah2UWwhD9UJSeXQXYo.jpg" alt="" /> <img id="mg3" class="mg" src="http://ekladata.com/ZMORA0xRIGoTi0dCKpSXJqnEnow.jpg" alt="" /> <img id="mg4" class="mg" src="http://ekladata.com/7dIMX4UbMNnp9VHdJh5D0EPru-A.jpg" alt="" /> <img id="mg5" class="mg" src="http://ekladata.com/Q8gPgfOoqP0yADWZmjmfka0DWCY.jpg" alt="" /> <img id="mg6" class="mg" src="http://ekladata.com/BiW-dGlgkZzZXAfmi60LuoKvstc.jpg" alt="" /> <img id="mg7" class="mg" src="http://ekladata.com/J320kC1QbHAdTM7SCJHQGiIqzh8.jpg" alt="" /> <img id="mg8" class="mg" src="http://ekladata.com/ylNAoOWInzX-nGl3mDioCtaXIfg.jpg" alt="" /> <img id="mg9" class="mg" src="http://ekladata.com/GX800pEKC7VJiyAIeMiYigS6sXI.jpg" alt="" /></div>
    <style><!--
    .stm{position:absolute; z-index:1; width:3vw; height:3vw; border-radius:50%; font-size:2vw;}
    #stm1{transform:translate(5vw,5vw);}
    #stm2{transform:translate(5vw,10vw);}
    #stm3{transform:translate(5vw,15vw);}
    #stm4{transform:translate(5vw,20vw);}
    #stm5{transform:translate(5vw,25vw);}
    #stm6{transform:translate(50vw,5vw);}
    #stm7{transform:translate(50vw,10vw);}
    #stm8{transform:translate(50vw,15vw);}
    #stm9{transform:translate(50vw,20vw);}
    .mg{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; transition:all 1s linear;}
    #stm1:focus ~ #mg1,#stm2:focus ~ #mg2,#stm3:focus ~ #mg3,#stm4:focus ~ #mg4,#stm5:focus ~ #mg5,#stm6:focus ~ #mg6,#stm7:focus ~ #mg7,#stm8:focus ~ #mg8,#stm9:focus ~ #mg9{width:100vw; height:56.25vw; left:0;}
    --></style>