Diaporama à commentaire

Retour

Clic sur les vignettes
et survol des images
pour le commentaire.

 

 

 

Comm 1

Comm 2

Comm 3

Code du montage:

<div style="position:relative; width: 900px; height: 600px; overflow: hidden;">
<div id="ancres" style="width: 900px; height: 600px; "><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>
<div id="tr0"><a href="#lien">Retour</a></div>
<div id="tr1"><a href="#lien1"><img src="http://ekladata.com/122SO7QoNUFQmkO68uclWPt0JPg/5820v.jpg" alt="" /></a></div>
<div id="tr2"><a href="#lien2"><img src="http://ekladata.com/hvEBHHoBfTnryOpdmpA5mW2PTjQ/5821v.jpg" alt="" /></a></div>
<div id="tr3"><a href="#lien3"><img src="http://ekladata.com/aIyER8158fhmxBwE-SsBE5RHVuA/5822v.jpg" alt="" /></a></div>
<div id="fd">&nbsp;</div>
<div id="img1" style="background-image: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/24/DSCN5820.JPG');">&nbsp;</div>
<div id="img2" style="background-image: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/24/DSCN5821.JPG');">&nbsp;</div>
<div id="img3" style="background-image: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/24/DSCN5822.JPG');">&nbsp;</div>
<div id="comm1">Comm 1</div>
<div id="comm2">Comm 2</div>
<div id="comm3">Comm 3</div>
</div>
</div>

<style type="text/css"><!--
#ancres a.ancre{display: none;}
#fd{position:absolute;z-index:1; transform:translate(0px,0px);width:900px; height:600px; background-color:grey;}

#tr0{position:absolute; z-index:2; transform:translate(810px,10px); width:80px; height:20px; font-size:15pt; color:coral; text-shadow:1px 1px black;}
#tr1{position:absolute; z-index:2; transform:translate(810px,50px);}
#tr2{position:absolute; z-index:2; transform:translate(810px,130px);}
#tr3{position:absolute; z-index:2; transform:translate(810px,210px);}

#comm1{transition:all 1s linear; position:absolute; z-index:7; width:600px; height:100px; transform:translate(50px,50px); text-align:center; font-size:55pt; text-shadow:1px 1px black; opacity:0; line-height:50px;}
#comm2{transition:all 1s linear; position:absolute; z-index:7; width:600px; height:100px; transform:translate(50px,50px); text-align:center; font-size:55pt; text-shadow:1px 1px black; opacity:0; line-height:50px;}
#comm3{transition:all 1s linear; position:absolute; z-index:7; width:600px; height:100px; transform:translate(50px,50px); text-align:center; font-size:55pt; text-shadow:1px 1px black; opacity:0; line-height:50px;}

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

#img1:hover ~ #comm1{opacity:1; color:coral;}
#img2:hover ~ #comm2{opacity:1; color:coral;}
#img3:hover ~ #comm3{opacity:1; color:coral;}

#ancres a#lien1:target ~ #img1{z-index:6; transform:translate(0px,0px);}
#ancres a#lien2:target ~ #img2{z-index:6; transform:translate(0px,0px);}
#ancres a#lien3:target ~ #img3{z-index:6; transform:translate(0px,0px);}
--></style>

Chaque groupe (vignette,image et commentaire) est créé en html, positionné en CSS et animé dans les deux derniers paragraphes CSS, au survol pour les commentaires et au clic, pour les images.
Les images font 800x600px et les vignettes 80x60px.