Bonjours à tous
Je suis sur un site et je voudrais, au survol d'une image afficher un texte par dessus l'image. Le probléme c'est que pour positioner le texte, j'utilise un positionement absolu, donc les diff. textes sont tous au même endroit. En gros, je voudrais des infobulle à plusieurs endroit.
Si vous voulez voir le résultat :
http://vincentlenoir.d.free.fr/Radio%20re-design/
Merci
Modifié par Vince71 (15 Jan 2006 - 11:30)
Je suis sur un site et je voudrais, au survol d'une image afficher un texte par dessus l'image. Le probléme c'est que pour positioner le texte, j'utilise un positionement absolu, donc les diff. textes sont tous au même endroit. En gros, je voudrais des infobulle à plusieurs endroit.
<div id="cds">
<a class="plus" href="#"><img class="cd" src="images/cd3_tn.jpg" /><span></span></a><br />
<a class="plus" href="#"><img class="cd" src="images/cd2_tn.jpg" /><span></span></a><br />
<a class="plus" href="#"><img class="cd" src="images/cd1_tn.jpg" /><span></span></a><br />
<a class="plus" href="#"><img class="cd" src="images/cd5_tn.jpg" /><span></span></a><br />
<a class="plus" href="#"><img class="cd" src="images/cd4_tn.jpg" /><span></span></a><br />
</div>
#cds {
margin-left: 19px;
}
.cd {
margin: 5px 0 5px 0;
border-left: solid 5px #eeeeee;
border-top: solid 5px #eeeeee;
border-right: solid 5px #e1e1e1;
border-bottom: solid 5px #e1e1e1;
}
a.plus:link span {
display: none;
position: absolute;
width: 52px;
height: 22px;
}
a.plus:hover span {
display: block;
position: absolute;
margin: 33px 0 0 14px;
background: url(images/plus.png);
background-repeat: no-repeat;
text-align: center;
color: #cccccc;
text-decoration: none;
}
Si vous voulez voir le résultat :
http://vincentlenoir.d.free.fr/Radio%20re-design/
Merci
Modifié par Vince71 (15 Jan 2006 - 11:30)