• Pour Danielle

    Cette fidèle visiteuse photographe, a apprécié le montage "On déplace", dans lequel je place des boutons invisibles, ce qui complique le code.

    Voici une version plus simple dans laquelle je ne propose que des translations latérales mais on peut varier avec des translations verticales ou en diagonales, si on le souhaite.

    9 images en 800x600px mais le nombre et le format sont à ajuster.

    Clic sur chaque image qui s'affiche.


    <div id="da"><input id="da1" type="text" /><input id="da2" type="text" /><input id="da3" type="text" /><input id="da4" type="text" /><input id="da5" type="text" /><input id="da6" type="text" /><input id="da7" type="text" /><input id="da8" type="text" /><input id="da9" type="text" /></div>
    <style><!--
    #da{position:relative; width:800px; height:600px; border:6px ridge grey; margin:5px auto; overflow:hidden; box-sizing:border-box;}
    #da1{position:absolute; width:800px; height:600px; border:none; transform:translate(0px,0px); transition:all 1s linear; background:url(http://ekladata.com/O2Cx0oidA1oePZiuOStdVeS4zQ0.jpg);}
    #da2{position:absolute; width:800px; height:600px; border:none; transform:translate(800px,0px); transition:all 1s linear; background:url(http://ekladata.com/BxzfigiqO_uoicpNXXeLC8Ob_0Y.jpg);}
    #da3{position:absolute; width:800px; height:600px; border:none; transform:translate(-800px,0px); transition:all 1s linear; background:url(http://ekladata.com/lf7MWTSS-aoK_O7HYiI_RnO4_-U.jpg);}
    #da4{position:absolute; width:800px; height:600px; border:none; transform:translate(800px,0px); transition:all 1s linear; background:url(http://ekladata.com/JiWT7R14UsPqqPZlb9sDmQACmKY.jpg);}
    #da5{position:absolute; width:800px; height:600px; border:none; transform:translate(-800px,0px); transition:all 1s linear; background:url(http://ekladata.com/0UyX5xUJ0j6_-LTkjMdWKEECCuQ.jpg);}
    #da6{position:absolute; width:800px; height:600px; border:none; transform:translate(800px,0px); transition:all 1s linear; background:url(http://ekladata.com/7Hkkyitwlo3sfxIzcq-qN_ETOpA.jpg);}
    #da7{position:absolute; width:800px; height:600px; border:none; transform:translate(-800px,0px); transition:all 1s linear; background:url(http://ekladata.com/_M1LHvQd5ujljbwTXLnUngYzHnw.jpg);}
    #da8{position:absolute; width:800px; height:600px; border:none; transform:translate(800px,0px); transition:all 1s linear; background:url(http://ekladata.com/e0RuWHu-Dol97Eg3iD991thAdjs.jpg);}
    #da9{position:absolute; width:800px; height:600px; border:none; transform:translate(-800px,0px); transition:all 1s linear; background:url(http://ekladata.com/VhD-i9RHKOJYqVNSK3PAFvD3XEI.jpg);}
    #da1:focus ~ #da2, #da2:focus ~ #da3, #da3:focus ~ #da4, #da4:focus ~ #da5, #da5:focus ~ #da6, #da6:focus ~ #da7, #da7:focus ~ #da8, #da8:focus ~ #da9{z-index:2; transform:translate(0px,0px);}
    --></style>