-
Art.06a.9.21
Le même en vertical. Le nombre d'images est à votre convenance (en modifiant le code).
<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; border: 3px ridge grey; text-align: left; margin: 20px auto;"><input id="ch1" class="ch" type="button" /> <input id="ch2" class="ch" type="button" /> <input id="ch3" class="ch" type="button" /> <input id="ch4" class="ch" type="button" /> <input id="ch5" class="ch" type="button" />
<p id="def"><img src="http://ekladata.com/NnN4J77WiCtexOXUx0-sPEhsfc0@1000x562.jpg" alt="" /><img src="http://ekladata.com/dxm2b0sUfB0ZbHjeqiBN1tZch5s@1000x562.jpg" alt="" /><img src="http://ekladata.com/GohmX9VaDbwtmZWmhc2OOU-RoFU@1000x562.jpg" alt="" /><img src="http://ekladata.com/LmC6fY8yW_MPnsE2EK8gPWKoqwo@1000x562.jpg" alt="" /><img src="http://ekladata.com/cTSfe8X3nFRmKVFkZcKlVWLqTns@1000x562.jpg" alt="" /></p>
</div>
<style><!--
.ch{position:absolute; z-index:5; background:coral!important; width:20px; height:20px; border-radius:50%;}
#ch1{transform:translate(970px,50px);}
#ch2{transform:translate(970px,100px);}
#ch3{transform:translate(970px,200px);}
#ch4{transform:translate(970px,300px);}
#ch5{transform:translate(970px,350px);}
#def{position:absolute; z-index:1; width:1000px; height:2810px; transform:translate(0px,-1124px); transition:all 1s;}
#ch1:focus ~ #def{transform:translate(0px,0px);}
#ch2:focus ~ #def{transform:translate(0px,-562px);}
#ch3:focus ~ #def{transform:translate(0px,-1124px);}
#ch4:focus ~ #def{transform:translate(0px,-1686px);}
#ch5:focus ~ #def{transform:translate(0px,-2248px);}
.ch:focus{background:lime!important;}
--></style>