• Diaporama à commentaire.

    J'ai privilégié les photos au rapport 4/3, pour proposer une taille utilisée par beaucoup mais la taille des écrans étant au rapport 16/9, plus adapté à la vision humaine, je repasse à ce format, dans ce montage qui présente des photos en 800x450px, dans un cadre de 800x550px.

    Les animations au clic sont préférées par certain(e)s à celles au survol mais il est facile de passer de l'une à l'autre; ici, ce sera au clic ... na !

    Le nombre d'images et donc de liens, de boutons, de commentaires est modulable.

    Le premier commentaire n'apparaît qu'au clic sur le premier bouton, pour simplifier le code.

     

    1

    2

    3

    4

    5

    Commentaire 1

    Commentaire 2

    Commentaire 3

    Commentaire 4

    Commentaire 5

    Code:
    <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><a id="lien5" class="ancre"></a>
    <p id="tr1"><a href="#lien1">1</a></p>
    <p id="tr2"><a href="#lien2">2</a></p>
    <p id="tr3"><a href="#lien3">3</a></p>
    <p id="tr4"><a href="#lien4">4</a></p>
    <p id="tr5"><a href="#lien5">5</a></p>
    <p id="img1"><img src="http://ekladata.com/3I1BGzZW9bW4PhYHDI0S4QArcq8/5855.jpg" alt="" /></p>
    <p id="img2"><img src="http://ekladata.com/QhetvfXLg-HOXAaqBihOzORy8dk/5872.jpg" alt="" /></p>
    <p id="img3"><img src="http://ekladata.com/u9-w1YjUnv8D13KGS3U_QT8VIa0/5878.jpg" alt="" /></p>
    <p id="img4"><img src="http://ekladata.com/9sgXryGPGIV9g37DkkHX3LYJays/5862.jpg" alt="" /></p>
    <p id="img5"><img src="http://ekladata.com/KXDOCySooINMbvt63fVtRTFnigI/5864.jpg" alt="" /></p>
    <p id="comm1">Commentaire 1</p>
    <p id="comm2">Commentaire 2</p>
    <p id="comm3">Commentaire 3</p>
    <p id="comm4">Commentaire 4</p>
    <p id="comm5">Commentaire 5</p>
    </div>
    </div>

    <style type="text/css"><!--
    #mont{position:relative; width:800px; height:550px; margin:10px auto; background-color:#909090; border:2px solid black;}
    #ancres a.ancre{display: none;}

    #tr1{width:30px; height:30px; border:2px solid white; background-color:#66ccff; text-align:center; transform:translate(200px,510px);position:absolute;font-size: 25px; font-weight: bold;}
    #tr2{width:30px; height:30px; border:2px solid white; background-color:#66ccff; text-align:center; transform:translate(280px,510px);position:absolute;font-size: 25px; font-weight: bold;}
    #tr3{width:30px; height:30px; border:2px solid white; background-color:#66ccff; text-align:center; transform:translate(360px,510px);position:absolute;font-size: 25px; font-weight: bold;}
    #tr4{width:30px; height:30px; border:2px solid white; background-color:#66ccff; text-align:center; transform:translate(440px,510px);position:absolute;font-size: 25px; font-weight: bold;}
    #tr5{width:30px; height:30px; border:2px solid white; background-color:#66ccff; text-align:center; transform:translate(520px,510px);position:absolute;font-size: 25px; font-weight: bold;}

    #comm1{position:absolute; width:800px; height:50px; transform:translate(0px,460px); text-align:center; font-size:18pt; color:white; text-shadow:1px 1px black; transition: all 1s ease; opacity:0;}
    #comm2{position:absolute; width:800px; height:50px; transform:translate(0px,460px); text-align:center; font-size:18pt; color:white; text-shadow:1px 1px black; transition: all 1s ease; opacity:0;}
    #comm3{position:absolute; width:800px; height:50px; transform:translate(0px,460px); text-align:center; font-size:18pt; color:white; text-shadow:1px 1px black; transition: all 1s ease; opacity:0;}
    #comm4{position:absolute; width:800px; height:50px; transform:translate(0px,460px); text-align:center; font-size:18pt; color:white; text-shadow:1px 1px black; transition: all 1s ease; opacity:0;}
    #comm5{position:absolute; width:800px; height:50px; transform:translate(0px,460px); text-align:center; font-size:18pt; color:white; text-shadow:1px 1px black; transition: all 1s ease; opacity:0;}

    #img1{position:absolute;z-index:2;width:800px;height:450px;transform:translate(0px,0px);transition: all 1s ease; opacity:1;}
    #img2{position:absolute;z-index:2;width:800px;height:450px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}
    #img3{position:absolute;z-index:2;width:800px;height:450px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}
    #img4{position:absolute;z-index:2;width:800px;height:450px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}
    #img5{position:absolute;z-index:2;width:800px;height:450px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}

    #ancres a#lien1:target ~ #img1, #ancres a#lien1:target ~ #comm1{opacity:1;}
    #ancres a#lien2:target ~ #img2, #ancres a#lien2:target ~ #comm2{opacity:1;}
    #ancres a#lien3:target ~ #img3, #ancres a#lien3:target ~ #comm3{opacity:1;}
    #ancres a#lien4:target ~ #img4, #ancres a#lien4:target ~ #comm4{opacity:1;}
    #ancres a#lien5:target ~ #img5, #ancres a#lien5:target ~ #comm5{opacity:1;}
    --></style>
    ...
    J'espère que le surlignage des différents éléments permet une meilleure compréhension du code.
    L'animation est ici par changement d'opacité mais on peut proposer autre chose, genre translation.