• Fen 800x600 bis

    Une remarque d'une fidèle visiteuse m'a fait comprendre que ma première version n'était pas simple à manipuler; voici donc la même mais avec ouverture et changement d'image de fond au clic, sur chaque bouton; clic hors montage pour revenir à zéro.

    6 images en 800x600px; L'animation est un peu différente mais...

     

     

     

    <div id="fr"><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:800px; height:600px; border:1px solid #000000; margin:5px auto;}
    .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; z-index:10; transform:translate(755px,20px); background:lime;}
    #bt2{position:absolute; z-index:10; transform:translate(755px,100px); background:coral;}
    #bt3{position:absolute; z-index:10; transform:translate(755px,180px); background:lime;}
    #bt4{position:absolute; z-index:10; z-index:10; transform:translate(755px,260px); background:coral;}
    #bt5{position:absolute; z-index:10; transform:translate(755px,340px); background:lime;}
    #fond{position:absolute; z-index:1; width:800px; height:600px; transform:translate(0px,0px);}
    #fg{ position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); transform-origin:center left; width:400px; height:600px; background:url('http://ekladata.com/TkeGrJoXQmEYTionGFg5d6kgWVM.jpg'); background-position:top left;}
    #fd{ position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,0px); transform-origin:center right; width:400px; height:600px; background:url('http://ekladata.com/TkeGrJoXQmEYTionGFg5d6kgWVM.jpg'); background-position:top right;}

    #bt1:focus ~ #fond{background:url('http://ekladata.com/IfVOu7UVtGNAiq0oKHgR6AV12SE.jpg');}
    #bt2:focus ~ #fond{background:url('http://ekladata.com/TbyVfAWe1Weql013UQfkkz1TZaw.jpg');}
    #bt3:focus ~ #fond{background:url('http://ekladata.com/vhqrbz2tCnVqs6wm8R9b42ZCiYY.jpg');}
    #bt4:focus ~ #fond{background:url('http://ekladata.com/9_3QekmisxCMdLqWEdONb_T_cZQ.jpg');}
    #bt5:focus ~ #fond{background:url('http://ekladata.com/rJ95ozUuoWgol5HQ4Dof4VSbObI.jpg');}
    #bt1:focus ~ #fg, #bt2:focus ~ #fg, #bt3:focus ~ #fg, #bt4:focus ~ #fg, #bt5:focus ~ #fg{transform:translate(0px,0px) perspective(1000px) rotatey(-100deg);}
    #bt1:focus ~ #fd, #bt2:focus ~ #fd, #bt3:focus ~ #fd, #bt4:focus ~ #fd, #bt5:focus ~ #fd{transform:translate(400px,0px) perspective(1000px) rotatey(100deg);}
    --></style>