• Fenêtre 2

    Ajoutons d'autres images à notre premier montage; pour cela, il faut ajouter des boutons à cliquer; chacun change l'image de fond, que l'on retrouve en ouvrant la fenêtre au survol !

     

     

     

     

    Mes images font 1150x648px mais pour placer les boutons sur le côté, le montage fait 1200x648px.

    Le bouton invisible (bt) qui commande l'ouverture des 2 vantaux (fg et fd) de la fenêtre.

    Les boutons au clic (bt1/2/3/4/5) commandent le changement d'image de l'élément span (fond).

    <div id="fr">
    <p id="bt">&nbsp;</p>
    <input id="bt1" class="b" type="text" /><input id="bt2" class="b" type="text" /><input id="bt3" class="b" type="text" /><input id="bt4" class="b" type="text" /><input id="bt5" class="b" type="text" /> <span id="fond">&nbsp;</span>
    <p id="fg">&nbsp;</p>
    <p id="fd">&nbsp;</p>
    </div>
    <style><!--
    #fr{width:1200px; height:648px; border:1px solid #000000; margin:5px auto;}
    #bt{position:absolute; z-index:10; transform:translate(0px,0px); width:1150px; height:648px;}
    .b{width:40px; height:40px; border:none; border-radius:50%;box-shadow:inset 3px 3px 5px white, inset -3px -3px 5px black;}
    #bt1{position:absolute; transform:translate(1155px,20px); background:lime;}
    #bt2{position:absolute; transform:translate(1155px,100px); background:coral;}
    #bt3{position:absolute; transform:translate(1155px,180px); background:lime;}
    #bt4{position:absolute; transform:translate(1155px,260px); background:coral;}
    #bt5{position:absolute; transform:translate(1155px,340px); background:lime;}
    #fond{position:absolute; z-index:1; width:1150px; height:648px; transform:translate(0px,0px); background:url('http://ekladata.com/Z6d-oKMA0K4hMKiMoYTQGHCPFig.jpg');}
    #fg{ position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); transform-origin:center left; width:575px; height:648px; background:url('http://ekladata.com/1JI4237EkqbLVR8a2y0u9DsXTMk.jpg'); background-position:top left;}
    #fd{ position:absolute; z-index:1; transition:all 1s linear; transform:translate(575px,0px); transform-origin:center right; width:575px; height:648px; background:url('http://ekladata.com/1JI4237EkqbLVR8a2y0u9DsXTMk.jpg'); background-position:top right;}
    #bt:hover ~ #fg{transform:translate(0px,0px) perspective(1000px) rotatey(-100deg);}
    #bt:hover ~ #fd{transform:translate(575px,0px) perspective(1000px) rotatey(100deg);}
    #bt1:focus ~ #fond{background:url('http://ekladata.com/q2BrJ3K-yDkLlsse9IqtD0HlNEA.jpg');}
    #bt2:focus ~ #fond{background:url('http://ekladata.com/swWb5VKgkvJR_mTYC8le8PKF014.jpg');}
    #bt3:focus ~ #fond{background:url('http://ekladata.com/2QnTA5AzwQaFcQiSvxbMBNuflpU.jpg');}
    #bt4:focus ~ #fond{background:url('http://ekladata.com/us_tCNeWnDX-EiWahLYubKeBmkE.jpg');}
    #bt5:focus ~ #fond{background:url('http://ekladata.com/Z6d-oKMA0K4hMKiMoYTQGHCPFig.jpg');}
    --></style>