Bonjour à tous,
J'ai trouvé un diaporama en CSS.
Il affiche des vignettes qui, quand on passe la souris dessus, affiche sur le coté l'image en grand.
J'aimerais associer à chacune des vignettes une légende.
Voici le contenu de la page html:
Code HTML :
<div id="gallery">
<em id="thumbs">
<a href="index.html">
<img src="trees/t1.jpg" alt="1" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t2.jpg" alt="2" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t3.jpg" alt="3" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t4.jpg" alt="4" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t5.jpg" alt="5" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t6.jpg" alt="6" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t7.jpg" alt="7" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t8.jpg" alt="8" title="photo_simple.css" /></a>
<a href="#nogo">
<img src="trees/t9.jpg" alt="8" title="photo_simple.css" /></a>
</em>
</div>Je suppose qu'il faut associerune légende à chacune des images puis l'appeler au moment de l'affichage...
Voici le fichier css:
Code HTML :
body {
background-color: #000000
}
#gallery {
position: relative;
width: 750px;
}
#thumbs {
width: 300px;
float: left;
}
#thumbs a {
display: block;
float: left;
margin: 0 0 5px 5px;
width: 80px;
height: 80px;
}
#thumbs a img {
width: 80px;
height: 80px;
border: 0;
}
#thumbs a:hover {
border-color: #ddd;
}
#thumbs a:hover img {
position: absolute;
width: auto;
height: auto;
left: 300px;
top: 0;
border: 1px solid #333;
}
Marco