• Remue ménage

    Amusement à partir des sélections présentées dans les pages précédentes.
    Survolez le bouton orange pour remettre de l'ordre dans tout ça !

     

     

     

     

     

     

     

     

    <div id="fda">
    <p id="bt"><img src="http://ekladata.com/29DA5H7PhaeUAFqRapmXDGbUp_E/btorg.png" alt="" /></p>
    <p id="sela">&nbsp;</p>
    <p id="selb">&nbsp;</p>
    <p id="selc">&nbsp;</p>
    <p id="seld">&nbsp;</p>
    <p id="sele">&nbsp;</p>
    <p id="self">&nbsp;</p>
    <p id="selg">&nbsp;</p>
    <p id="selh">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #fda{position:relative; width:800px; height:600px; border:4px ridge white; margin:5px auto; background:url('http://ekladata.com/j_AFfOb7D08QnY4CcT_bd1fp4CI/steel3.jpg');}
    #bt{position:absolute; z-index:10; transform:translate(750px,20px);}
    #sela{position:absolute; transition:all 2s linear 0s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(400px,300px);background-position:0% 0%;}
    #selb{position:absolute; transition:all 2s linear 2s;width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(0px,0px);background-position:100% 0%;}
    #selc{position:absolute; transition:all 2s linear 4s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(0px,300px);background-position:0% 33%;}
    #seld{position:absolute; transition:all 2s linear 6s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(400px,0px);background-position:100% 33.3%;}
    #sele{position:absolute; transition:all 2s linear 8s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(400px,150px);background-position:0% 66.6%;}
    #self{position:absolute; transition:all 2s linear 10s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(0px,450px);background-position:100% 66.6%;}
    #selg{position:absolute; transition:all 2s linear 12s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(400px,450px);background-position:0% 100%;}
    #selh{position:absolute; transition:all 2s linear 14s; width:400px; height:150px; background:url('http://ekladata.com/e4xGkG7WPR_FKW5wKr_QR9OurA0/3544.jpg'); transform:translate(0px,150px);background-position:100% 100%;}

    #bt:hover ~ #sela{transform:translate(0px,0px); z-index:5;}
    #bt:hover ~ #selb{transform:translate(400px,0px); z-index:5;}
    #bt:hover ~ #selc{transform:translate(0px,150px); z-index:5;}
    #bt:hover ~ #seld{transform:translate(400px,150px); z-index:5;}
    #bt:hover ~ #sele{transform:translate(0px,300px); z-index:5;}
    #bt:hover ~ #self{transform:translate(400px,300px); z-index:5;}
    #bt:hover ~ #selg{transform:translate(0px,450px); z-index:5;}
    #bt:hover ~ #selh{transform:translate(400px,450px); z-index:5;}
    --></style>


    ...
    ...
    ...