• Rideau

    Copie de mon article du jour, en plus étroit.

    1 2 3 4 5

    <p>...</p>

    <p id="f1">
    <img id="bt1" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="1" />
    <img id="bt2" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="2" />
    <img id="bt3" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="3" />
    <img id="bt4" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="4" />
    <img id="bt5" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="5" />
    <img id="m0a" src="http://ekladata.com/xB49ibwmvGrJCboFxY7L9EUj2pA.jpg" alt="" />
    <img id="m0b" src="http://ekladata.com/tBASlLkF78g1AYgXJeiFx_CicNo.jpg" alt="" />
    <img id="m0c" src="http://ekladata.com/7B9g3exn40rkStCNAtXcBdrfAvI.jpg" alt="" />
    <img id="m0d" src="http://ekladata.com/6qdEHWJTnY36yGn6pE7UvCXYDHk.jpg" alt="" />
    <img id="m1" src="http://ekladata.com/94JNB8vucDQEF9oDHzmeT3-xlPo.jpg" alt="" />
    <img id="m2" src="http://ekladata.com/jyLZTwKNfuMHB6cuSH0KbtWrQvA.jpg" alt="" />
    <img id="m3" src="http://ekladata.com/Z3w0wtI_hTKOKPFIO14bqkmJWhA.jpg" alt="" />
    <img id="m4" src="http://ekladata.com/p8WWuUVXO9nEoRK77WFA5R5u77M.jpg" alt="" />
    <img id="m5" src="http://ekladata.com/x1u_a0Eq-4X7fLCOYpF0Svu8DUQ.jpg" alt="" />
    </p>

    <p>...</p>
    <style><!--
    #f1{position:relative; margin:0% 0% 48% 8%; }
    #m0a{position:absolute; z-index:10; width:20%; margin:0% 0% 0% 0%; transition:all 1s;}
    #m0b{position:absolute; z-index:10; width:20%; margin:0% 0% 0% 20%; transition:all 1s;}
    #m0c{position:absolute; z-index:10; width:20%; margin:0% 0% 0% 40%; transition:all 1s;}
    #m0d{position:absolute; z-index:10; width:20%; margin:0% 0% 0% 60%; transition:all 1s;}

    #bt1{position:absolute; z-index:15; margin:2% 0% 0% 75%; width:3%; height:2.5%;}
    #bt2{position:absolute; z-index:25; margin:8% 0% 0% 75%; width:3%; height:2.5%;}
    #bt3{position:absolute; z-index:15; margin:14% 0% 0% 75%; width:3%; height:2.5%;}
    #bt4{position:absolute; z-index:15; margin:20% 0% 0% 75%; width:3%; height:2.5%;}
    #bt5{position:absolute; z-index:15; margin:26% 0% 0% 75%; width:3%; height:2.5%;}
    #m1, #m2, #m3, #m4, #m5{position:absolute; z-index:1; width:80%; border:4px ridge grey; box-sizing:border-box;}

    #bt1:hover ~ #m1{z-index:5;}
    #bt2:hover ~ #m2{z-index:5;}
    #bt3:hover ~ #m3{z-index:5;}
    #bt4:hover ~ #m4{z-index:5;}
    #bt5:hover ~ #m5{z-index:5;}
    #bt1:hover ~ #m0a, #bt1:hover ~ #m0b, #bt1:hover ~ #m0c, #bt1:hover ~ #m0d{transform:rotatey(90deg);}
    #bt2:hover ~ #m0a, #bt2:hover ~ #m0b, #bt2:hover ~ #m0c, #bt2:hover ~ #m0d{transform:rotatey(90deg);}
    #bt3:hover ~ #m0a, #bt3:hover ~ #m0b, #bt3:hover ~ #m0c, #bt3:hover ~ #m0d{transform:rotatey(90deg);}
    #bt4:hover ~ #m0a, #bt4:hover ~ #m0b, #bt4:hover ~ #m0c, #bt4:hover ~ #m0d{transform:rotatey(90deg);}
    #bt5:hover ~ #m0a, #bt5:hover ~ #m0b, #bt5:hover ~ #m0c, #bt5:hover ~ #m0d{transform:rotatey(90deg);}
    --></style>

    width:80%; détermine la largeur de votre montage par rapport à la largeur de votre page ou zone article. Si vous décidez de la diminuer à 60%, chaque partie du rideau devra faire 15% (x4=60%).

    48% détermine la hauteur de votre montage; à modifier s'il y a un trop grand vide dessous.

    20% détermine la largeur des 4 parties du rideau; margin:0% 0% 0% 0%//20%; détermine la position de chaque partie. Ainsi, si vous diminuez le montage à 60%, chaque partie fera 15% et positionnée en 0%/15%/30%/45%;

    Les boutons seront positionnés en fonction de la largeur de votre montage. margin:2% 0% 0% 75%; 

         -  le premier chiffre (2%) correspond à l'écart entre le haut du montage et le haut du bouton.

         - le dernier chiffre (75%) correspond à l'écart entre le bord gauche du montage et le bord gauche du bouton; si vous diminuez la largeur du montage, il faudra ramener les boutons vers le centre.

    L'adresse en vert est un bouton que j'ai créé et hébergé sur Ekla: vous pouvez l'utiliser ou en utiliser un autre.

    Les 4 adresses en rouge sont les parties de mon image, découpée par the Gimp et hébergées sur Ekla.

    Les 5 adresses en bleu sont les adresses des images hébergées sur Ekla; pas de dimension précise puisqu'elles s'adaptent mais sont au rapport 16/9

    Les lignes rouge, surlignées en vert, sont les pointillés que vous transformerez en texte, avant et après le montage.