Plein écran 6

Remplacez mes adresses-image en bleu par les vôtres.

Clic

<div style="width: 60vw; height: 8vw; margin: 1vh auto; text-align: left;">
<p id="rd0">Clic</p>
<input id="rd1" class="rd" type="text" value="1" /> <input id="rd2" class="rd" type="text" value="2" /> <input id="rd3" class="rd" type="text" value="3" /> <input id="rd4" class="rd" type="text" value="4" /> <input id="rd5" class="rd" type="text" value="5" /> <input id="rd6" class="rd" type="text" value="6" /> <img id="pec1" class="pec" src="http://ekladata.com/tKv4AKVXGGqXgguKQriQ6qyIhyA.jpg" alt="" /> <img id="pec2" class="pec" src="http://ekladata.com/BKZH2Y7zZ378u6tk-aJLC-wRnD4.jpg" alt="" /> <img id="pec3" class="pec" src="http://ekladata.com/VPOQ_KDXOQ0qRzOjLiGOZCpn8_A.jpg" alt="" /> <img id="pec4" class="pec" src="http://ekladata.com/VII8wR6w0lWBg3D4-TU46Gz-CBY.jpg" alt="" /> <img id="pec5" class="pec" src="http://ekladata.com/ykHk5ZaY-Q5_cdgTTLr4UTPD3p8.jpg" alt="" /> <img id="pec6" class="pec" src="http://ekladata.com/963hsOClJlR1pVdEkxXCZZsHNj8.jpg" alt="" /></div>
<style><!--
#rd0{position:absolute; z-index:1; width:5vw; height:4vw; text-align:center; line-height:4vw; font-size:2vw; transform:translate(8vw,0vw);}
.rd{position:absolute; z-index:1; width:4vw; height:4vw; border-radius:50%; border:0.2vh solid black; text-align:center; line-height:4vw; font-size:2vw; color:white!important; text-shadow:0.1vh 0.1vh black;background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-size:24vw 4vw; box-shadow:inset -0.4vh -0.4vh 0.6vh white, inset 0.4vh 0.4vh 0.6vh black;}
#rd1{transform:translate(16vw,0vw); background-position:0vw 0vw;}
#rd2{transform:translate(22vw,0vw); background-position:-4vw 0vw;}
#rd3{transform:translate(28vw,0vw); background-position:-8vw 0vw;}
#rd4{transform:translate(34vw,0vw); background-position:-12vw 0vw;}
#rd5{transform:translate(40vw,0vw); background-position:-16vw 0vw;}
#rd6{transform:translate(46vw,0vw); background-position:-20vw 0vw;}
.pec{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; top:50vh; transition:all 1s linear;}
#rd1:focus ~ #pec1,#rd2:focus ~ #pec2,#rd3:focus ~ #pec3,#rd4:focus ~ #pec4,#rd5:focus ~ #pec5,#rd6:focus ~ #pec6{width:100vw; height:56.25vw; left:0; top:0;}
--></style>