• Printemps

    Le principe de ce montage est de créer une fenêtre à la dimension d'une image (1400x788px) et de commander, par un clic sur chaque bouton, le déplacement d'un cadre, contenant ici 16 images en 1400x788px, de façon à faire apparaître une image différente à chaque clic.

    Le cadre contenant les images contient ici 4 images par ligne et 4 lignes; le nombre d'images multiplie le nombre de lignes du code mais il est très répétitif puisqu'il déplace latéralement d'une largeur d'image (1400px) et verticalement d'une hauteur d'image (788px)





    Le cadre du montage, centré dans la page, fait 1400x788px; les boutons sont placés les uns sous les autres, ici, à droite; les images sont disposées, dans le cadre id="pan", en 4 images par ligne et sur 4 rangées; un clic sur un bouton change pas position du cadre "pan" pour qu'une image différente s'affiche dans la fenêtre du montage; ce qui dépasse est caché.

    <div style="width: 1400px; height: 788px; border: 4px ridge white; box-shadow: 4pw 4pw 8pw black; margin: 0px auto; overflow: hidden;"><input id="a1" class="bt" type="button" /> <input id="a2" class="bt" type="button" /> <input id="a3" class="bt" type="button" /> <input id="a4" class="bt" type="button" /><input id="a5" class="bt" type="button" /> <input id="a6" class="bt" type="button" /> <input id="a7" class="bt" type="button" /> <input id="a8" class="bt" type="button" /><input id="a9" class="bt" type="button" /> <input id="a10" class="bt" type="button" /> <input id="a11" class="bt" type="button" /> <input id="a12" class="bt" type="button" /><input id="a13" class="bt" type="button" /> <input id="a14" class="bt" type="button" /> <input id="a15" class="bt" type="button" /> <input id="a16" class="bt" type="button" />
    <p id="pan"><img src="http://ekladata.com/_JrA-7LiX8dgrE2Ezc5rg2WpDUg@1400x788.jpg" alt="" /><img src="http://ekladata.com/wzNUVjrEtsr_WbiC4BhgaeHHe3M@1400x788.jpg" alt="" /><img src="http://ekladata.com/cEnFnfVyCVXITxXdQsVmqCGToj0@1400x788.jpg" alt="" /><img src="http://ekladata.com/ce2qnB2atER_EjmEEVOZwltdd1Y@1400x788.jpg" alt="" /><br /> <img src="http://ekladata.com/2Q-dmgE-CQFX6rIxfQ6Fq3npSng@1400x788.jpg" alt="" /><img src="http://ekladata.com/wPiU4WOs_qrdp4IFiFTUYzNdXcE@1400x788.jpg" alt="" /><img src="http://ekladata.com/AnygxYCWjDxmQFfyAw1LlAWQcT0@1400x788.jpg" alt="" /><img src="http://ekladata.com/vRbik06okSLTSc34YXCBDkOdgeM@1400x788.jpg" alt="" /><br /><img src="http://ekladata.com/PApIRIwexS7djYweJxbBqReZnBA@1400x788.jpg" alt="" /><img src="http://ekladata.com/vskC_EIcj-gNF0skEF4YPzZGw4E@1400x788.jpg" alt="" /><img src="http://ekladata.com/ZRgjkBcaPgZ2MtdrczMvH-zzHuo@1400x788.jpg" alt="" /><img src="http://ekladata.com/mAjDmSne3uM4GiARHGHUTzkWRco@1400x788.jpg" alt="" /><br /><img src="http://ekladata.com/RRqsGtp9_AoT7Oeb8Gq7pagYSRs@1400x788.jpg" alt="" /><img src="http://ekladata.com/l1b0GjS5qn_PfqYCzN6QGWb4UcE@1400x788.jpg" alt="" /><img src="http://ekladata.com/lYhbOikLGq22jIFkUOcvkdBth3M@1400x788.jpg" alt="" /><img src="http://ekladata.com/ZJ8vqlq_K6zg__CULmGTgD0s6D0@1400x788.jpg" alt="" /></p>
    </div>
    <style><!--
    .bt{ position:absolute; z-index:10; width:30px; height:30px; border-radius:50%; text-align:center; font-size:16pt; box-shadow:inset 2px 2px 3px white, inset -2px -2px 2px black; border:none; background:#808080;}
    #a1{transform:translate(1350px,10px);}
    #a2{transform:translate(1350px,50px);}
    #a3{transform:translate(1350px,100px);}
    #a4{transform:translate(1350px,150px);}
    #a5{transform:translate(1350px,200px);}
    #a6{transform:translate(1350px,250px);}
    #a7{transform:translate(1350px,300px);}
    #a8{transform:translate(1350px,350px);}
    #a9{transform:translate(1350px,400px);}
    #a10{transform:translate(1350px,450px);}
    #a11{transform:translate(1350px,500px);}
    #a12{transform:translate(1350px,550px);}
    #a13{transform:translate(1350px,600px);}
    #a14{transform:translate(1350px,650px);}
    #a15{transform:translate(1350px,700px);}
    #a16{transform:translate(1350px,750px);}
    #pan{width:5610px; height:3160px; transform:translate(-4200px,0px); transition:all 1s linear;}
    #a1:focus ~ #pan{transform:translate(-4200px,0px);}
    #a2:focus ~ #pan{transform:translate(-2800px,0px);}
    #a3:focus ~ #pan{transform:translate(-1400px,0px);}
    #a4:focus ~ #pan{transform:translate(0px,0px);}
    #a5:focus ~ #pan{transform:translate(0px,-788px);}
    #a6:focus ~ #pan{transform:translate(-1400px,-788px);}
    #a7:focus ~ #pan{transform:translate(-2800px,-788px);}
    #a8:focus ~ #pan{transform:translate(-4200px,-788px);}
    #a9:focus ~ #pan{transform:translate(-4200px,-1576px);}
    #a10:focus ~ #pan{transform:translate(-2800px,-1576px);}
    #a11:focus ~ #pan{transform:translate(-1400px,-1576px);}
    #a12:focus ~ #pan{transform:translate(0px,-1576px);}
    #a13:focus ~ #pan{transform:translate(0px,-2364px);}
    #a14:focus ~ #pan{transform:translate(-1400px,-2364px);}
    #a15:focus ~ #pan{transform:translate(-2800px,-2364px);}
    #a16:focus ~ #pan{transform:translate(-4200px,-2364px);}
    --></style>