-
Rideau
Survolez chaque bouton
Pour faire descendre
le rideau correspondant.
<div id="fd">
<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"> </p>
<p id="s2"> </p>
<p id="s3"> </p>
<p id="s4"> </p>
<p id="s1a"> </p>
<p id="s2a"> </p>
<p id="s3a"> </p>
<p id="s4a"> </p>
<p id="s1b"> </p>
<p id="s2b"> </p>
<p id="s3b"> </p>
<p id="s4b"> </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>