-
On déplace...
Double clic sur la première image puis clic sur chaque image qui s'affiche pour passer à la suivante.
9 images en 800x600px
<div id="in"><input id="bt1" class="bt" type="text" /><input id="bt2" class="bt" type="text" /><input id="bt3" class="bt" type="text" /><input id="bt4" class="bt" type="text" /><input id="bt5" class="bt" type="text" /> <input id="bt6" class="bt" type="text" /><input id="bt7" class="bt" type="text" /> <input id="bt8" class="bt" type="text" /> <input id="bt9" class="bt" type="text" /><span id="mg"><img style="float: left;" src="http://ekladata.com/E9i-gSeoWmq8-XO8XzC7qjSbr8k.jpg" alt="" /> <img style="float: left;" src="http://ekladata.com/Zkxl92WB7AY6ik7CGPzt2JxXrTw.jpg" alt="" /> <img style="float: left;" src="http://ekladata.com/1JLpg9L2wlOrpDLUBNZ90F4vziI.jpg" alt="" /><br /> <img style="float: left; clear: left;" src="http://ekladata.com/BpIFxvNc2bGZ6pmTEWnm258N8IY.jpg" alt="" /> <img style="float: left;" src="http://ekladata.com/zKK08UnFw09fknehYwUshWhRcYw.jpg" alt="" /> <img style="float: left;" src="http://ekladata.com/9B4XG-SxdA2LlxuP963L1dCC1iI.jpg" alt="" /><br /> <img style="float: left; clear: left;" src="http://ekladata.com/N-xQlWlJ7wuxfI5-uqrlaYgo3rA.jpg" alt="" /> <img style="float: left;" src="http://ekladata.com/p9WQSG-jaIEhprqP-19Psvx3E0s.jpg" alt="" /> <img style="float: left;" src="http://ekladata.com/9mLPTTwsURbl2AIET_sK2OldyeQ.jpg" alt="" /> </span></div>
<style><!--
#in{position:relative; width:800px; height:600px; border:6px ridge grey; overflow:hidden; margin:5px auto;}
.bt{position:absolute; width:800px; height:600px; transform:translate(0px,0px); background:transparent; border:none; }
#bt1{z-index:10;}
#bt2,#bt3, #bt4, #bt5, #bt6, #bt7, #bt8, #bt9{z-index:9;}
#mg{ position:absolute; z-index:1; width:2400px; height:1800px; transform:translate(0px,0px); transition:all 1s linear;display:inline-block;}
#bt1:focus ~ #bt2{z-index:11;}
#bt2:focus ~ #bt3{z-index:11;}
#bt3:focus ~ #bt4{z-index:11;}
#bt4:focus ~ #bt5{z-index:11;}
#bt5:focus ~ #bt6{z-index:11;}
#bt6:focus ~ #bt7{z-index:11;}
#bt7:focus ~ #bt8{z-index:11;}
#bt8:focus ~ #bt9{z-index:11;}
#bt1:focus ~ #mg{transform:translate(0px,0px);}
#bt2:focus ~ #mg{transform:translate(-800px,0px);}
#bt3:focus ~ #mg{transform:translate(-1600px,0px);}
#bt4:focus ~ #mg{transform:translate(-1600px,-600px);}
#bt5:focus ~ #mg{transform:translate(-1600px,-1200px);}
#bt6:focus ~ #mg{transform:translate(-800px,-1200px);}
#bt7:focus ~ #mg{transform:translate(0px,-1200px);}
#bt8:focus ~ #mg{transform:translate(0px,-600px);}
#bt9:focus ~ #mg{transform:translate(-800px,-600px);}
--></style>