• Rideau horizontal

    J'ai proposé un article avec 6 images; en voici le code avec 3 images.

     

    Survolez chaque bouton
    pour faire se fermer
    le rideau correspondant.

     

     

     

     

     

     

     

     

     

     

     

     

    <div id="fd">&nbsp;
    <p id="bt1"><img src="http://ekladata.com/Chii0wI_EollV37evuA4sBLk8n8/btd.png" alt="" /></p>
    <p id="bt2"><img src="http://ekladata.com/29DA5H7PhaeUAFqRapmXDGbUp_E/btorg.png" alt="" /></p>
    <p id="bt3"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></p>
    <p id="s8" style="font-size: 18pt;">Survolez chaque bouton<br />pour faire se fermer<br />le rideau correspondant.</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>
    </div>

    <style type="text/css"><!--
    #fd{position:relative; width:800px; height:600px; border:4px ridge white; margin:10px auto; background:url('http://ekladata.com/s1iGP4V0qqh9r_zchCG7juq0bA4/3609.jpg'); overflow:hidden;}
    #s1{transition:all 2s linear; position:absolute; z-index:10; transform:translate(-200px,-22px); width:200px; height:600px; background:url('http://ekladata.com/uy6PCoAn_6oCPBy7EkFtJXNaD6A/6624.jpg'); background-position:0% 100%;}
    #s2{transition:all 2s linear; position:absolute; z-index:9; transform:translate(-200px,-22px); width:200px; height:600px; background:url('http://ekladata.com/uy6PCoAn_6oCPBy7EkFtJXNaD6A/6624.jpg'); background-position:33% 100%;}
    #s3{transition:all 2s linear;position:absolute; z-index:10; transform:translate(820px,-22px); width:200px; height:600px; background:url('http://ekladata.com/uy6PCoAn_6oCPBy7EkFtJXNaD6A/6624.jpg'); background-position:100% 100%;}
    #s4{transition:all 2s linear;position:absolute; z-index:9; transform:translate(820px,-22px); width:200px; height:600px; background:url('http://ekladata.com/uy6PCoAn_6oCPBy7EkFtJXNaD6A/6624.jpg'); background-position:66% 100%;}
    #s1a{transition:all 2s linear; position:absolute; z-index:10; transform:translate(-200px,-22px); width:200px; height:600px; background:url('http://ekladata.com/cnH7u20qG8C6q4fCRLbABkruXPA/6625.jpg'); background-position:0% 100%;}
    #s2a{transition:all 2s linear; position:absolute; z-index:9; transform:translate(-200px,-22px); width:200px; height:600px; background:url('http://ekladata.com/cnH7u20qG8C6q4fCRLbABkruXPA/6625.jpg'); background-position:33% 100%;}
    #s3a{transition:all 2s linear; position:absolute; z-index:10; transform:translate(820px,-22px); width:200px; height:600px; background:url('http://ekladata.com/cnH7u20qG8C6q4fCRLbABkruXPA/6625.jpg'); background-position:100% 100%;}
    #s4a{transition:all 2s linear;position:absolute; z-index:9; transform:translate(820px,-22px); width:200px; height:600px; background:url('http://ekladata.com/cnH7u20qG8C6q4fCRLbABkruXPA/6625.jpg'); background-position:66% 100%;}
    #s1b{transition:all 2s linear; position:absolute; z-index:10; transform:translate(-200px,-22px); width:200px; height:600px; background:url('http://ekladata.com/Orv1Pr3PN9nAUvCLQTytg8nv8Y4/6627.jpg'); background-position:0% 100%;}
    #s2b{transition:all 2s linear; position:absolute; z-index:9; transform:translate(-200px,-22px); width:200px; height:600px; background:url('http://ekladata.com/Orv1Pr3PN9nAUvCLQTytg8nv8Y4/6627.jpg'); background-position:33% 100%;}
    #s3b{transition:all 2s linear; position:absolute; z-index:10; transform:translate(820px,-22px); width:200px; height:600px; background:url('http://ekladata.com/Orv1Pr3PN9nAUvCLQTytg8nv8Y4/6627.jpg'); background-position:100% 100%;}
    #s4b{transition:all 2s linear;position:absolute; z-index:9; transform:translate(820px,-22px); width:200px; height:600px; background:url('http://ekladata.com/Orv1Pr3PN9nAUvCLQTytg8nv8Y4/6627.jpg'); background-position:66% 100%;}

    #bt1{position:absolute; z-index:15; transform:translate(750px,10px);}
    #bt2{position:absolute; z-index:15; transform:translate(750px,80px);}
    #bt3{position:absolute; z-index:15; transform:translate(750px,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;}

    #bt1:hover ~ #s1{transform:translate(0px,-22px);}
    #bt1:hover ~ #s2{transform:translate(200px,-22px);}
    #bt1:hover ~ #s3{transform:translate(600px,-22px);}
    #bt1:hover ~ #s4{transform:translate(400px,-22px);}
    #bt2:hover ~ #s1a{transform:translate(0px,-22px);}
    #bt2:hover ~ #s2a{transform:translate(200px,-22px);}
    #bt2:hover ~ #s3a{transform:translate(600px,-22px);}
    #bt2:hover ~ #s4a{transform:translate(400px,-22px);}
    #bt3:hover ~ #s1b{transform:translate(0px,-22px);}
    #bt3:hover ~ #s2b{transform:translate(200px,-22px);}
    #bt3:hover ~ #s3b{transform:translate(600px,-22px);}
    #bt3:hover ~ #s4b{transform:translate(400px,-22px);}
    --></style>

    Le cadre du montage en 800x600px, centré dans votre page.

    Les 3 boutons (dans cet exemple mais vous pouvez en retirer ou en ajouter), positionnés en CSS.

    Les 3 images, découpées en 4 parties.

    Chaque partie d'image est positionnée à l'extérieur du cadre et invisible.

    Le survol de chaque bouton (bt1/bt2/bt3) les anime en les positionnant dans le cadre du montage.

    Le paragraphe du texte (s8) est facultatif.

    Remplacez mes adresses d'image, en rouge, par les vôtres.