• Nicole 10 img

    J'ai publié ce genre de montage, avec 7 images, dans une dimension "batarde", autre que le traditionnel 800x600px; un clic sur l'image affichée fait apparaître une autre image, venant d'une orientation variée.

    Une page explicative en 800x600px ne reprenait pas les différentes positions des images mais uniquement le principe; le voici donc, clef en main mais, dans mon élan, j'ai préparé 10 images en 800x600px et je n'ai pas voulu en laisser de côté alors, le voici avec 10 images et un lecteur audio.

    Des variantes dans l'animation et dans le nombre d'images sont possibles: ce n'est qu'une possibilité.

    Changement d'image au clic.

    <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" /><input id="da10" 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; z-index:1; width:800px; height:600px; border:none; transform:translate(0px,0px); transition:all 1s linear; background:url(http://ekladata.com/9Xcgu3sx0FF4Qq1yEX-mHBZaYC0.jpg);}
    #da2{position:absolute; z-index:2; width:800px; height:600px; border:none; transform:translate(-800px,0px); transition:all 1s linear; background:url(http://ekladata.com/veHgudx0norsP666AqS-pkgTNpg.jpg);}
    #da3{position:absolute; z-index:3; width:800px; height:600px; border:none; transform:translate(-800px,-600px); transition:all 1s linear; background:url(http://ekladata.com/oMVoTTy7fPFWQVF4pirOwd-4Tuc.jpg);}
    #da4{position:absolute; z-index:4; width:800px; height:600px; border:none; transform:translate(0px,-600px); transition:all 1s linear; background:url(http://ekladata.com/Td8vUO-LH6kWgq_b7rd41FBcnhU.jpg);}
    #da5{position:absolute; z-index:5; width:800px; height:600px; border:none; transform:translate(800px,-600px); transition:all 1s linear; background:url(http://ekladata.com/26oTy2O7ezvd3Z9Z7rLAXMUHF_4.jpg);}
    #da6{position:absolute; z-index:6; width:800px; height:600px; border:none; transform:translate(800px,0px); transition:all 1s linear; background:url(http://ekladata.com/CN1ORAIdSVTYGuPw3bfS9Q5pMcw.jpg);}
    #da7{position:absolute; z-index:7; width:800px; height:600px; border:none; transform:translate(800px,600px); transition:all 1s linear; background:url(http://ekladata.com/8Be27K_9buGfbsaVfMxLPKqqBMI.jpg);}
    #da8{position:absolute; z-index:8; width:800px; height:600px; border:none; transform:translate(0px,600px); transition:all 1s linear; background:url(http://ekladata.com/3fWb20ytLf50DUtUsFq2XjH0rSY.jpg);}
    #da9{position:absolute; z-index:9; width:800px; height:600px; border:none; transform:translate(-800px,600px); transition:all 1s linear; background:url(http://ekladata.com/KGid7_n2V_ZrxLDcual9R4OWyOE.jpg);}
    #da10{position:absolute; z-index:10; width:800px; height:600px; border:none; transform:translate(-800px,0px); transition:all 1s linear; background:url(http://ekladata.com/m0TWtqt39SfJ7_9ZfaxoK6ibQbI.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, #da9:focus ~ #da10{z-index:20; transform:translate(0px,0px);}
    --></style>