• 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>