• Construire son montage 3

     

    1

    2

    3

    4

    Arbre solitaire

    Dans la mare aux grenouilles, avec de l'eau jusqu'aux ... genoux

    Aygues

    Aygues toujours.

    Code: la position des commentaires et des boutons est à votre convenance;la transition de gauche à droite peut être inversée ou verticale; on peut également faire une transition du genre rond central qui s'agrandit...
    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a>
    <p id="vig1"><a href="#lien1"> 1</a></p>
    <p id="vig2"><a href="#lien2"> 2</a></p>
    <p id="vig3"><a href="#lien3"> 3</a></p>
    <p id="vig4"><a href="#lien4"> 4</a></p>
    <p id="comm1">Arbre solitaire</p>
    <p id="comm2">Dans la mare aux grenouilles, avec de l'eau jusqu'aux ... genoux</p>
    <p id="comm3">Aygues</p>
    <p id="comm4">Aygues toujours.</p>
    <p id="img1"><img src="http://ekladata.com/DYfyAVyb2ZW-xvVLXvjEAEh_mC0/5812.jpg" alt="" /></p>
    <p id="img2"><img src="http://ekladata.com/rBx0UM2c6xH0etKINSw2SRw2QN8/5835.jpg" alt="" /></p>
    <p id="img3"><img src="http://ekladata.com/pyBrM7Eal8L01cyCNqBVf3gF98c/5846.jpg" alt="" /></p>
    <p id="img4"><img src="http://ekladata.com/k2CJqdLLLCld0pKqlV8G9pMmyds/5847.jpg" alt="" /></p>
    </div>
    </div>


    <style type="text/css"><!--
    #mont{position:absolute; overflow:hidden; width:800px; height:600px; margin:10px auto; border:4px solid grey;}
    #ancres a.ancre{display: none;}
    #comm1{position:absolute; z-index:5; transform:translate(0px,520px); width:800px; height:30px; background-color:rgba(0,128,0,0.5); font-size:12pt; text-align:center; opacity:1;}
    #comm2{position:absolute; z-index:5; transform:translate(0px,520px); width:800px; height:30px; background-color:rgba(0,128,0,0.5); font-size:12pt; text-align:center; opacity:0;}
    #comm3{position:absolute; z-index:5; transform:translate(0px,520px); width:800px; height:30px; background-color:rgba(0,128,0,0.5); font-size:12pt; text-align:center; opacity:0;}
    #comm4{position:absolute; z-index:5; transform:translate(0px,520px); width:800px; height:30px; background-color:rgba(0,128,0,0.5); font-size:12pt; text-align:center; opacity:0;}
    #vig1{position:absolute; z-index:10; transform:translate(50px,550px);width:40px; height:40px; border:2px solid black; border-radius:50%; background-color:rgba(255,255,0,0.7);font-size:20pt; text-align:center; font-weight:bold; color:black;}
    #vig2{position:absolute; z-index:10; transform:translate(150px,550px); width:40px; height:40px; border:2px solid black; border-radius:50%; background-color:rgba(255,255,0,0.7); font-size:20pt; text-align:center; font-weight:bold; color:black;}
    #vig3{position:absolute; z-index:10; transform:translate(250px,550px); width:40px; height:40px; border:2px solid black; border-radius:50%; background-color:rgba(255,255,0,0.7); font-size:20pt; text-align:center; font-weight:bold; color:black;}
    #vig4{position:absolute; z-index:10; transform:translate(350px,550px); width:40px; height:40px; border:2px solid black; border-radius:50%; background-color:rgba(255,255,0,0.7); font-size:20pt; text-align:center; font-weight:bold; color:black;}
    #img1{position:absolute;z-index:1;width:800px;height:600px;transform:translate(0px,0px);transition: all 1s ease; }
    #img2{position:absolute;z-index:1;width:800px;height:600px;transform:translate(-800px,0px);transition: all 1s ease; }
    #img3{position:absolute;z-index:1;width:800px;height:600px;transform:translate(-800px,0px);transition: all 1s ease; }
    #img4{position:absolute;z-index:1;width:800px;height:600px;transform:translate(-800px,0px);transition: all 1s ease;}
    #ancres a#lien2:target ~ #comm1, #ancres a#lien3:target ~ #comm1, #ancres a#lien4:target ~ #comm1{opacity:0;}
    #ancres a#lien2:target ~ #img2{transform:translate(0px,0px);}
    #ancres a#lien2:target ~ #comm2{opacity:1;}
    #ancres a#lien3:target ~ #img3{transform:translate(0px,0px);}
    #ancres a#lien3:target ~ #comm3{opacity:1;}
    #ancres a#lien4:target ~ #img4{transform:translate(0px,0px);}
    #ancres a#lien4:target ~ #comm4{opacity:1;}
    --></style>

    Le commentaire 1 est transparent lorsque les autres s'affichent; le clic sur une vignette fait apparaître le commentaire correspondant par changement d'opacité et l'image correspondante par déplacement latéral.
    Chaque élément peut être modifié en style (taille, couleur...)