• Ascenseur avec commentaire

    Une version avec commentaire qui apparaît au clic et que l'on peut faire venir d'autres directions ou d'autres façons.
    N'ayant plus de photos en 16/9, j'en ai déformé 4 en 4/3 !
    Si vous faites apparaître un commentaire sur la première image, soit il s'affichera au clic, soit il faudra l'effacer pour afficher les autres... c'est vous qui voyez !
    Utilisant tout la largeur de ma page, je ne peux ajouter une bordure et un ombre ... sniff !

    1

    2

    3

    4

    Attention, virage !

    Les arbres se colorent doucement

    Paysage de montagne.

     

    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>
    <p id="bt1"><a href="#lien1"><span style="color: white; text-shadow: 1px 1px black;">1</span></a></p>
    <p id="bt2"><a href="#lien2"><span style="color: white; text-shadow: 1px 1px black;">2</span></a></p>
    <p id="bt3"><a href="#lien3"><span style="color: white; text-shadow: 1px 1px black;">3</span></a></p>
    <p id="bt4"><a href="#lien4"><span style="color: white; text-shadow: 1px 1px black;">4</span></a></p>
    <p id="img1"><img src="http://ekladata.com/IdLWs55pVZ4maJOpY-wrxMzbWbI/5792.jpg" alt="" /></p>
    <p id="img2"><img src="http://ekladata.com/uB_FJgOLGPZHhpproiAbq-ozZpM/5793.jpg" alt="" /></p>
    <p id="img3"><img src="http://ekladata.com/ZOSPoNY2NMOjQS83xuH7zV6mne4/5794.jpg" alt="" /></p>
    <p id="img4"><img src="http://ekladata.com/IgJXTv-atQcGDjXZDMqC7MAOXMM/5796.jpg" alt="" /></p>
    <p id="comm2">Attention, virage !</p>
    <p id="comm3">Les arbres se colorent doucement</p>
    <p id="comm4">Paysage de montagne.</p>
    </div>
    </div>

    <style type="text/css"><!--
    #mont{width:1200px; height:675px; transform:translate(0px,0px); position:relative; overflow:hidden;}
    #ancres a.ancre{display: none;}

    #bt1{position:fixed; transform:translate(1150px,30px); z-index:15; font-size: 45px;}
    #bt2{position:fixed; transform:translate(1150px,80px); z-index:15; font-size: 45px;}
    #bt3{position:fixed; transform:translate(1150px,130px); z-index:15; font-size: 45px;}
    #bt4{position:fixed; transform:translate(1150px,180px); z-index:15; font-size: 45px;}

    #img1{position:absolute; z-index:1;transition:all 1s linear; width:1200px;height:675px;}
    #img2{position:absolute; z-index:5; transform:translate(0px,675px);transition:all 1s linear; width:1200px;height:675px;}
    #img3{position:absolute; z-index:5;transform:translate(0px,675px);transition:all 1s linear; width:1200px ht:675px;}
    #img4{position:absolute; z-index:5; transform:translate(0px,675px);transition:all 1s linear; width:1200px;height:675px;}

    #comm2{ position:absolute; z-index:6; transform:translate(0px,-200px);transition:all 1s linear; width:1200px;height:200px; font-size:40pt; text-align:center; color:lime; text-shadow:1px 1px black;}
    #comm3{ position:absolute; z-index:6; transform:translate(0px,-200px);transition:all 1s linear; width:1200px;height:200px; font-size:40pt; text-align:center; color:lime; text-shadow:1px 1px black;}
    #comm4{ position:absolute; z-index:6; transform:translate(0px,-200px);transition:all 1s linear; width:1200px;height:200px; font-size:40pt; text-align:center; color:lime; text-shadow:1px 1px black;}

    #ancres a#lien1:target ~ #img1{transform:translate(0px,0px);}
    #ancres a#lien2:target ~ #img2{transform:translate(0px,0px);}
    #ancres a#lien3:target ~ #img3{transform:translate(0px,0px);}
    #ancres a#lien4:target ~ #img4{transform:translate(0px,0px);}

    #ancres a#lien2:target ~ #comm2{transform:translate(0px,100px);}
    #ancres a#lien3:target ~ #comm3{transform:translate(0px,100px);}
    #ancres a#lien4:target ~ #comm4{transform:translate(0px,100px);}
    --></style>
    ...
    J'ai volontairement laissé les paragraphes séparés pour que bien en montrer la construction; une écriture plus simple pour le bouton qui commande 2 actions est possible mais restons simple !