Survol et infobulle sur une image [résolu]

Bonjour à tous,

Je suis un nouveau converti au CSS, notamment grâce à l'ouvrage de Sieur R. Goetter. J'avance doucement, et je tombe sur un os. J'ai cherché une solution, mais sans succès pour l'instant. Peut-être pourrez-vous m'aider.

L'idée est simple : je veux créer des infobulles au survol d'une image. C'est assez proche de ce tutorial (http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol) sauf que c'est sur une image que l'action se passe.
Tout va bien en dehors du positionnement de l'infobulle par rapport à l'image. Explorer semble considérer que l'origine de l'image est en haut à gauche, Mozilla en bas à gauche. D'où impossibilité de paramétrer harmonieusement pour tous les navigateurs : la position absolue définie pour l'infobulle est en fait relative... au navigateur. Quelqu'un a-t-il une astuce ?
Merci d'avance.

R.
Modifié par Melkior (24 Apr 2006 - 16:15)

Bonjour Melkior

Avec ce que tu m'as donné comme code, j'ai fait ça :
css

body {
margin: 0;
padding: 0;
}
#international a.legende {
	position: relative;
	text-decoration: none;
}
#international a.legende img {
	border: 2px solid white;
}
#international a.legende span {
	display: none;
}
#international a.legende:hover {
	background: none;
	z-index: 500;
}
#international a.legende:hover img {
	border: 2px solid #ffcc33;
}
#international a.legende:hover span {
	display: inline;
	position: absolute;
	z-index: 500;
	top: 5em;
	left: 1em;
	width: 300px;
	border: 1px white dotted;
	background: #333366;
	font: normal 11px Arial, Helvetica, sans-serif;
	text-align: left;
	color: #ffcc33;
	padding: 0.5em;
}

html

<div id="international">
	<a class="legende" href="#"><img src="http://bluesmilies.celeonet.fr/heureux/129.gif"/><span>blablablablablablabla</span></a>
</div>

et ça donne ça en image :

Hormis un problème de marge classique, je pense, entre IE et FF, je ne vois pas de grosse différence.

Peux-tu nous montrer, toi même, une image comparative stp ?

Alors j'ai mis en ligne, on gagnera en efficacité. Chez moi, ça va pas du tout.
Dans l'exemple en ligne, j'ai mis le décalage top et left à 0, on voit bien le problème. J'espère que je ne suis pas le seul...
http://www.yukulele.com/essaicss/essai5.htm[/url]


Merci.

pardon : http://www.yukulele.com/essaicss/essai5.htm

Bonsoir,
Je pense qu'en ajoutant aussi une valeur pour la hauteur de "#international a.legende:hover span" ce serait mieux, en effet, tu indiques une largeur mais pas de hauteur.

Merci beaucoup Blue, mais...

2 inconvénients, dont un que je ne solutionne pas :

1. S'il y a plusieurs images dans la page - c'est mon cas - ça oblige à recaler chaque infobulle suivant la position de l'image dans la page. C'est pas un problème, juste un peu de code en plus.

2. Si la page du site est centrée - c'est mon cas... - la distance entre mes images et le bord gauche du navigateur est fluctuante... donc la position des infobulles aussi, puisqu'elle est maintenant calée sur le bord du navigateur. On peut se consoler en se disant que ça merde pareillement sur les 2 navigateurs...

J'ai remis en ligne une version centrée pour que ce soit clair, avec les modifs que tu m'as suggérées.

bah non, la position de tes infosbulles n'est pas fluctuante puisqu'en position absolue.

Oui, enfin la position est absolue par rapport au bord haut-gauche du navigateur mais fluctuante par rapport aux images puisque celles-ci sont centrées.

Mais ayé ! Ca y était presque, il faut également centrer le texte de l'infobulle en positionnement absolu :

position: absolute;
	left: 50%;
	margin-left: -150px;/*pour un bloc de 300px*/

Une fois fait, il faut jouer sur la propriété margin-left (et top bien sûr), en fonction de la position de l'image. Un peu pénible mais ça marche, pour IE et FF.

Merci bien.

...comment on fait ?...

Trouvé... (je suis pas un habitué des forums...)

Maintenant que j'ai fait le 'montage', c'est vrai que c'est pénible à mettre en oeuvre. Le truc simple reste encore à trouver : on se retrouve à tatonner pour le positionnement, dont l'origine est le coin haut/gauche du navigateur. Et le positionnement dans la hauteur dépend aussi du nombre de lignes de l'infobulle. Pas super pratique. Mais ça me va dans l'immédiat.

Encore merci.