-
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 !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 !