• Rideau

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Survolez chaque bouton
    Pour faire descendre
    le rideau correspondant.


    <div id="fd">&nbsp;
    <p id="s5"><img src="http://ekladata.com/Chii0wI_EollV37evuA4sBLk8n8/btd.png" alt="" /></p>
    <p id="s6"><img src="http://ekladata.com/29DA5H7PhaeUAFqRapmXDGbUp_E/btorg.png" alt="" /></p>
    <p id="s7"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></p>
    <p id="s1">&nbsp;</p>
    <p id="s2">&nbsp;</p>
    <p id="s3">&nbsp;</p>
    <p id="s4">&nbsp;</p>
    <p id="s1a">&nbsp;</p>
    <p id="s2a">&nbsp;</p>
    <p id="s3a">&nbsp;</p>
    <p id="s4a">&nbsp;</p>
    <p id="s1b">&nbsp;</p>
    <p id="s2b">&nbsp;</p>
    <p id="s3b">&nbsp;</p>
    <p id="s4b">&nbsp;</p>
    <p id="s8">Survolez chaque bouton<br />Pour faire descendre<br />le rideau correspondant.</p>
    </div>

    <style type="text/css"><!--
    #fd{position:relative; width:800px; height:600px; border:4px ridge white; margin:10px auto; background:url('http://ekladata.com/j_AFfOb7D08QnY4CcT_bd1fp4CI/steel3.jpg'); overflow:hidden;}
    #s1{transition:all 2s linear; position:absolute; z-index:10; transform:translate(0px,-172px); width:800px; height:150px; background:url('http://ekladata.com/_bkBfPD318dMjEwRFR26HTjj4pQ/6229.jpg'); background-position:100% 0%;}
    #s2{transition:all 2.5s linear; position:absolute; z-index:9; transform:translate(0px,-172px); width:800px; height:150px; background:url('http://ekladata.com/_bkBfPD318dMjEwRFR26HTjj4pQ/6229.jpg'); background-position:100% 33%;}
    #s3{transition:all 2.6s linear; position:absolute; z-index:8; transform:translate(0px,-278px); width:800px; height:150px; background:url('http://ekladata.com/_bkBfPD318dMjEwRFR26HTjj4pQ/6229.jpg'); background-position:100% 66%;}
    #s4{transition:all 3s linear;position:absolute; z-index:7; transform:translate(0px,-428px); width:800px; height:150px; background:url('http://ekladata.com/_bkBfPD318dMjEwRFR26HTjj4pQ/6229.jpg'); background-position:100% 100%;}
    #s1a{transition:all 2s linear; position:absolute; z-index:10; transform:translate(0px,-172px); width:800px; height:150px; background:url('http://ekladata.com/QnlCiZKHzYC775cbKtgrq9TWLgc/6528.jpg'); background-position:100% 0%;}
    #s2a{transition:all 2.5s linear; position:absolute; z-index:9; transform:translate(0px,-172px); width:800px; height:150px; background:url('http://ekladata.com/QnlCiZKHzYC775cbKtgrq9TWLgc/6528.jpg'); background-position:100% 33%;}
    #s3a{transition:all 2.6s linear; position:absolute; z-index:8; transform:translate(0px,-278px); width:800px; height:150px; background:url('http://ekladata.com/QnlCiZKHzYC775cbKtgrq9TWLgc/6528.jpg'); background-position:100% 66%;}
    #s4a{transition:all 3s linear;position:absolute; z-index:7; transform:translate(0px,-428px); width:800px; height:150px; background:url('http://ekladata.com/QnlCiZKHzYC775cbKtgrq9TWLgc/6528.jpg'); background-position:100% 100%;}
    #s1b{transition:all 2s linear; position:absolute; z-index:10; transform:translate(0px,-172px); width:800px; height:150px; background:url('http://ekladata.com/3kFqRJHDcXIRgm0YkeRNm2R056E/6240.jpg'); background-position:100% 0%;}
    #s2b{transition:all 2.5s linear; position:absolute; z-index:9; transform:translate(0px,-172px); width:800px; height:150px; background:url('http://ekladata.com/3kFqRJHDcXIRgm0YkeRNm2R056E/6240.jpg'); background-position:100% 33%;}
    #s3b{transition:all 2.6s linear; position:absolute; z-index:8; transform:translate(0px,-278px); width:800px; height:150px; background:url('http://ekladata.com/3kFqRJHDcXIRgm0YkeRNm2R056E/6240.jpg'); background-position:100% 66%;}
    #s4b{transition:all 3s linear;position:absolute; z-index:7; transform:translate(0px,-428px); width:800px; height:150px; background:url('http://ekladata.com/3kFqRJHDcXIRgm0YkeRNm2R056E/6240.jpg'); background-position:100% 100%;}
    #s5{position:absolute; z-index:15; transform:translate(700px,10px);}
    #s6{position:absolute; z-index:15; transform:translate(700px,80px);}
    #s7{position:absolute; z-index:15; transform:translate(700px,150px);}
    #s8{position:absolute; z-index:1; transform:translate(100px,50px); width:600px; height:300px; text-align:center; font-size:16pt; color:coral; text-shadow:1px 1px black;}

    #s5:hover ~ #s1{transform:translate(0px,-22px);}
    #s5:hover ~ #s2{transform:translate(0px,128px);}
    #s5:hover ~ #s3{transform:translate(0px,278px);}
    #s5:hover ~ #s4{transform:translate(0px,428px);}
    #s6:hover ~ #s1a{transform:translate(0px,-22px);}
    #s6:hover ~ #s2a{transform:translate(0px,128px);}
    #s6:hover ~ #s3a{transform:translate(0px,278px);}
    #s6:hover ~ #s4a{transform:translate(0px,428px);}
    #s7:hover ~ #s1b{transform:translate(0px,-22px);}
    #s7:hover ~ #s2b{transform:translate(0px,128px);}
    #s7:hover ~ #s3b{transform:translate(0px,278px);}
    #s7:hover ~ #s4b{transform:translate(0px,428px);}
    --></style>