• fen-800x600-ter

    100 fois sur le métier, remettez votre ouvrage; polissez-le sans cesse et le re-polissez... Boileau avait raison !

    Une visiteuse s'intéressant à mon premier montage, je l'ai proposé, un peu modifiée, au format 800x600px (bis) mais le fonctionnement ne me convenait pas entièrement; le voici avec un fonctionnement qui permet de jouer l'animation entre deux survols de bouton.

    On peut ajouter des couples bouton/image selon son désir.

     

     

     

    <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; background:url('http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg'); background-size:cover;}
    .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:hover ~ #fond{background:url('http://ekladata.com/IfVOu7UVtGNAiq0oKHgR6AV12SE.jpg');}
    #bt2:hover ~ #fond{background:url('http://ekladata.com/TbyVfAWe1Weql013UQfkkz1TZaw.jpg');}
    #bt3:hover ~ #fond{background:url('http://ekladata.com/vhqrbz2tCnVqs6wm8R9b42ZCiYY.jpg');}
    #bt4:hover ~ #fond{background:url('http://ekladata.com/9_3QekmisxCMdLqWEdONb_T_cZQ.jpg');}
    #bt5:hover ~ #fond{background:url('http://ekladata.com/rJ95ozUuoWgol5HQ4Dof4VSbObI.jpg');}
    #bt1:hover ~ #fg, #bt2:hover ~ #fg, #bt3:hover ~ #fg, #bt4:hover ~ #fg, #bt5:hover ~ #fg{transform:translate(0px,0px) perspective(1000px) rotatey(-100deg);}
    #bt1:hover ~ #fd, #bt2:hover ~ #fd, #bt3:hover ~ #fd, #bt4:hover ~ #fd, #bt5:hover ~ #fd{transform:translate(400px,0px) perspective(1000px) rotatey(100deg);}
    --></style>