• Plein écran 14


    <div style="position: absolute; z-index: 10; width: 100vw; height: 56.25vw; text-align: left; left=0; top: 2vw;"><input id="bt0" type="text" value="clic" /><input id="bt1" class="bout" type="text" /><input id="bt2" class="bout" type="text" /><input id="bt3" class="bout" type="text" /><input id="bt4" class="bout" type="text" /><input id="bt5" class="bout" type="text" /><input id="bt6" class="bout" type="text" /> <img id="perty1" class="perty" src="http://ekladata.com/P1wOod0KsrAYjsYg9WXtjnP0Xco.jpg" alt="" /> <img id="perty2" class="perty" src="http://ekladata.com/Hw1EaAOGWirGQa451Srxny2j-Rk.jpg" alt="" /> <img id="perty3" class="perty" src="http://ekladata.com/5MQnznCU0sFjh7RldSOalBspN7w.jpg" alt="" /> <img id="perty4" class="perty" src="http://ekladata.com/recuHA2KdWAf1DddEHlcEr8JRSU.jpg" alt="" /> <img id="perty5" class="perty" src="http://ekladata.com/jRpBeS930ZlCAJD7QDekaNf0Ufw.jpg" alt="" /> <img id="perty6" class="perty" src="http://ekladata.com/Z8rR3heWKvRuQ0NjDEV53eslvUY.jpg" alt="" /></div>

    <style><!--
    #bt0{position:absolute; z-index:110; width:4vw; transform:translate(95vw,1vw); text-align:center; font-size:1.5vw; background:rgba(0,0,0,0.5); text-align:0.1vh 0.1vh black; color:white;}
    .bout{position:absolute; z-index:110; width:2vw; height:2vw; border-radius:50%;}
    #bt1{transform:translate(96vw,5vw);}
    #bt2{transform:translate(96vw,5vw);}
    #bt3{transform:translate(96vw,8vw);}
    #bt4{transform:translate(96vw,11vw);}
    #bt5{transform:translate(96vw,14vw);}
    #bt6{transform:translate(96vw,17vw);}
    .perty{position:absolute; z-index:100; width:100vw; height:56.25vw; transform:translate(0vw,0vw); transition:all 1s linear;}
    #perty2,#perty3,#perty4,#perty5,#perty6{opacity:0;}
    #bt2:focus ~ #perty2,#bt3:focus ~ #perty3,#bt4:focus ~ #perty4,#bt5:focus ~ #perty5,#bt6:focus ~ #perty6{z-index:105; opacity:1;}
    --></style>