• Loneci.Herbier 2

    Voilà un code publié, modifié pour 7 images (ou +) en 800x600px. Changement au clic.


    <div id="d1"><input id="d2" type="text" /><input id="d3" type="text" /><input id="d4" type="text" /><input id="d5" type="text" /><input id="d6" type="text" /><input id="d7" type="text" /><input id="d8" type="text" /></div>
    <style><!--
    #d1{position:relative; width:800px; height:600px; border:6px ridge grey; margin:5px auto;}
    #d2{position:absolute; z-index:5; width:800px; height:600px; transform:translate(0px,0px); background:url(http://ekladata.com/TS3Fy4CAYsNzaQ1EWLVS5_JHRRs.jpg); border:none;}
    #d3{position:absolute; z-index:4; width:0px; height:0px; transform:translate(100px,100px); transition:all 1.5s linear; background:url(http://ekladata.com/HdDPwn90G-tSC5p37aex6UFAi_k.jpg); border:none;}
    #d4{position:absolute; z-index:3; width:0px; height:0px; transform:translate(700px,500px);  transition:all 1.5s linear; background:url(http://ekladata.com/GjGyDDx6UdLuGTtSD0vkI_1D_Fg.jpg); border:none;}
    #d5{position:absolute; z-index:2; width:0px; height:0px; transform:translate(100px,100px); transition:all 1.5s linear; background:url(http://ekladata.com/1adRwRylhnsDL1tNc_k9RDMe8c4.jpg); border:none;}
    #d6{position:absolute; z-index:1; width:0px; height:0px; transform:translate(700px,500px); transition:all 1.5s linear; background:url(http://ekladata.com/fS-ZcdQhvFlIfA5WuBOmELAxVe4.jpg); border:none;}
    #d7{position:absolute; z-index:2; width:0px; height:0px; transform:translate(100px,100px); transition:all 1.5s linear; background:url(http://ekladata.com/uveyiOwSIfpsxzMAedWhyNbVUdU.jpg); border:none;}
    #d8{position:absolute; z-index:1; width:0px; height:0px; transform:translate(700px,500px); transition:all 1.5s linear; background:url(http://ekladata.com/G153YVAm5pTcE5wPYzKNYVzkGLw.jpg);  border:none;}
    #d2:focus ~ #d3,#d3:focus ~ #d4, #d4:focus ~ #d5, #d5:focus ~ #d6, #d6:focus ~ #d7, #d7:focus ~ #d8 {z-index:10; transform:translate(0px,0px); width:800px; height:600px;}
    --></style>