• Construire son montage 2

    Nous avons réalisé la structure de notre diaporama, il va falloir revenir sur la façon de changer d'image en CSS, dont vous trouverez les bases ICI

    Hébergeons deux images et récupérons leur adresses.

    vign 1

    vign 2

    Commentaire 1

    Commentaire 2


    Vous retrouvez le code déjà construit et les commandes par clic:
    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a>
    <p id="vig1"><a href="#lien1"><span style="font-size:14pt; font-weight:bold;color: black; ">vign 1</span></a></p>
    <p id="vig2"><a href="#lien2"><span style="font-size:14pt; font-weight:bold;color: black; ">vign 2</span></a></p>
    <p id="comm1">Commentaire 1</p>
    <p id="comm2">Commentaire 2</p>
    <p id="img1"><img src="http://ekladata.com/rRFXSvEW1nQdtiohcz7KLfGV9-E/5840.jpg" alt="" /></p>
    <p id="img2"><img src="http://ekladata.com/TS6cBrOyn-Y2xQRwLzd9MnI2AuU/5845.jpg" alt="" /></p>
    </div>
    </div>
    <style type="text/css"><!--
    #mont{position:absolute; width:800px; margin:10px auto ;}
    #ancres a.ancre{display: none;}
    #comm1{position:absolute; z-index:2; transform:translate(0px,540px); 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:2; transform:translate(0px,540px); 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:3; transform:translate(50px,570px); width:80px; height:30px; background-color:rgba(255,255,0,0.5); font-size:12pt; text-align:center;}
    #vig2{position:absolute; z-index:3; transform:translate(150px,570px); width:80px; height:30px; background-color:rgba(255,255,0,0.5); font-size:12pt; text-align:center;}
    #img1{position:absolute;z-index:1;width:800px;height:600px;transform:translate(0px,0px);transition: all 1s ease; opacity:1;}
    #img2{position:absolute;z-index:1;width:800px;height:600px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}
    #ancres a#lien2:target ~ #comm1{opacity:0;}
    #ancres a#lien2:target ~ #img2, #ancres a#lien2:target ~ #comm2{opacity:1;}
    --></style>
    Au départ, l'image 1 et le commentaire 1 sont visibles; au clic sur vignette 2, l'image 2 s'affiche au dessus de l'image 1 et le commentaire 2 s'affiche alors que le commentaire 1 devient transparent (opacity:0)
    On peut, bien entendu, remplacer les mots vignette 1 et 2 par des images ou des symboles (gif) et les couleurs sont à adapter.
    La transition est ici par changement d'opacité mais nous allons voir ensuite par translation.