• Diaporama avec descriptif 1

    J'ai publié 2 types de montages avec changement d'image au clic et avec un descriptif, commandé au survol d'un bouton (par opacité) ou au survol d'un bouton (par translation).

    Voici une proposition pour un montage avec des images en 800x450px (16/9), facilement adaptable à des images en 800x600px.

    Vous pouvez ajouter autant d'ensemble image/bouton/descriptif que vous le souhaitez.

    Première version: clic sur les boutons pour changer d'image et survol du descriptif pour afficher le descriptif de l'image affichée.

    Descriptif

    Le descriptif 1...

    Descriptif

    Le descriptif 2 ...

    Descriptif

    Le descriptif 3 ...

    Descriptif

    Le descriptif 4 ...

    Descriptif

    Le descriptif 5 ...


    <div style="width: 800px; height: 450px; border: 1px solid black; margin: 0px auto; overflow: hidden;"><input id="a1" class="bt" type="text" value="1" /><input id="a2" class="bt" type="text" value="2" /><input id="a3" class="bt" type="text" value="3" /><input id="a4" class="bt" type="text" value="4" /><input id="a5" class="bt" type="text" value="5" />
    <div id="cont" style="width: 1700px; height: 450px; transition: all 1s linear;">
    <img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/A9rCLTDHnd3pOViASFFV_TsW8sA.jpg" alt="" />
    <p id="b1">Descriptif</p>
    <p id="d1">Le descriptif 1...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/lEOhpCEdixdDONNVhYNA3F_-iPI.jpg" alt="" />
    <p id="b2">Descriptif</p>
    <p id="d2">Le descriptif 2 ...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/CKL9G_83GolVLFis12ybos1BfEc.jpg" alt="" />
    <p id="b3">Descriptif</p>
    <p id="d3">Le descriptif 3 ...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/bxNR51h2_l5-wYGWC9B2xDYBRC8.jpg" alt="" />
    <p id="b4">Descriptif</p>
    <p id="d4">Le descriptif 4 ...</p>
    <img style="clear: left; float: left; width: 800px; height: 450px;" src="http://ekladata.com/ZOx8ScQtOvRILccAAnRdS_qLQFs.jpg" alt="" />
    <p id="b5">Descriptif</p>
    <p id="d5">Le descriptif 5 ...</p>
    </div>
    </div>

    <style><!--
    .bt{ position:absolute; z-index:5; width:30px; height:30px; border-radius:50%;text-align:center; font-size:16pt;}
    #a1{transform:translate(10px,10px);}
    #a2{transform:translate(10px,60px);}
    #a3{transform:translate(10px,110px);}
    #a4{transform:translate(10px,160px);}
    #a5{transform:translate(10px,210px);}

    #b1,#b2,#b3,#b4,#b5{float: left; z-index:5;width: 100px; height: 20px; text-align:center;background: rgba(255,255,255,0.5); transform: translate(-120px,20px);}
    #d1, #d2,#d3, #d4,#d5{float: left; width: 700px; height: 400px; transform: translate(-50px,20px); transition: all 1s linear; background: rgba(0,0,0,0.5); text-align: center; font-size: 14pt; color: white; text-shadow: 1px 1px black;}
    #a1:focus ~ #cont{transform:translate(0px,0px);}
    #a2:focus ~ #cont{transform:translate(0px,-450px);}
    #a3:focus ~ #cont{transform:translate(0px,-900px);}
    #a4:focus ~ #cont{transform:translate(0px,-1350px);}
    #a5:focus ~ #cont{transform:translate(0px,-1800px);}
    #b1:hover ~ #d1,#b2:hover ~ #d2,#b3:hover ~ #d3,#b4:hover ~ #d4,#b5:hover ~ #d5{transform:translate(-850px,20px);}
    --></style>


    Si vous voulez ajouter une image, ajoutez:

    - un bouton <input id="a6" class="bt" type="text" value="6">

    - un ensemble avec une nouvelle adresse image, un nouvel identifiant bouton et descriptif (id="b6" et id="d6"

    En ligne CSS, ajoutez:

    #a6{transform:translate(10px,260px);}   l'espace en hauteur entre chaque bouton est de 50px, dans mon cas; la présentation des boutons est à votre choix; je ne propose rien pour ne pas compliquer le code.

    #b1,#b2,#b3,#b4,#b5,#b6{...}

    #d1, #d2,#d3, #d4,#d5,#d6{...}

    #a6:focus ~ #cont{transform:translate(0px,-2250px);}  la hauteur de mes images étant de 450px, le pas entre chaque est donc de 450px; si vos images font 600px de haut, revoir les valeurs du mouvement vertical.

    #b1:hover ~ #d1,#b2:hover ~ #d2,#b3:hover ~ #d3,#b4:hover ~ #d4,#b5:hover ~ #d5,#b6:hover ~ #d6{...}

    Et pi c'est tout !