Texte au survol d'une image

Bonjour,


J'ai mis en place du texte dans une balise <span> qui apparait au passage de la souris sur une images avec le code suivant : (que j'ai trouvé ici il me semble

Html :

<div class="ERP"><a href="erp.php"><img src="images/ERP.png" width="100" height="100" border="0">
<span>
Mon texte
</span>

CSS :

a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 120px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: -100px;
width: 300px;
background: #FFFFCC;
text-align: left;
color: #000000;
}

Mais j'ai 3 problèmes !!!

1) je n'arriva pas positionner correctement le span. Elle s'alligne sur la DIV qui la produit. En jouant sur la valeur left en négatif cela me permet de la centrer, mais si je voulais que la span soit indépendant de sa DIV et la coller toujours à fauche de l'acran, comment devrais-je faire ?

2) Je n'arrive pas à mettre des lien à l'intérieur du <span> car du coup le span est toujours visible. C'est sans doute normal en raison du code Css pour les lien.

3) Lorsque le <span> s'affiche il faudrait que sa disparition soit "temporisé" car sinon en déplacant la souris de l'image au <span> le <span> disparait.

Merci de votre aide

@+

Salut Salva,

Pour positionner un element a l'exterieur de son conteneur, tu peux utiliser la position absolute en jouant sur la propriete left et en specifiant la largeur de l'element (pour se faire utilise plutot un element de bloc comme p plutot qu'un element en ligne).

En fait il y a plusieurs solutions possibles, meme pour "temporiser", comme tu dis, l'affichage de ton element, les principaux qui me viennent a l'esprit sont utiliser Javascript ou alors de mettre le hover sur la div (necessite un hack pour IE6 qui n'accepte la pseudo classe hover que sur les anchors) ou encore definir une zone reactive (soit un <a> en position absolute avec hauteur et largeur definie).


Je ne suis pas sure de comprendre comment tu veux afficher cela, mais si ce que je pense, ca pourrait se rapprocher a de l'affichage de sous-menu de ce style la :
http://tutorials.alsacreations.com/deroulant/menu-horizontal1.htm
http://tutorials.alsacreations.com/deroulant/menu-horizontal2.htm
http://tutorials.alsacreations.com/deroulant/menu-horizontal3.htm

Essaye de voir ces scripts, de comprendre comment ils fonctionnent et de comment le reutiliser dans ton cas.

Bon courage
Modifié par K-feine (24 Nov 2008 - 05:11)

Hello,

Je réponds juste pour le point 2), tu ne peux pas mettre un lien dans ton span, car ton span est déjà dans un lien et il est impossible de mettre un lien dans un lien.