Discussion :

[JeanJean75]

Bonjour.

Je cherche une méthode simple et efficace qui permet lorsque la souris passe sur une image d'en afficher une en superposition. J'espère mettre fait bien comprendre.

Merci.

[Erwan31]

Bonjour,
n'oublie pas d'aller jeter un œil aux tutos: http://r-hunel.developpez.com/tutoriels/css/info-bulle/

[JeanJean75]

Merci de ta réponse.

En fouinant un peu sur le web, j'ai trouvé une méthode me permettant de trouver mon bonheur.

Cependant, le résultat est parfait sous FF, mais sur Google Chrome est IE, on est loin du compte. :/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="info" style="border:none;"><img src="Boutons/edito.png" /><span><img src="Boutons/edito_s.png" /></span></a>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a.info {
    position: relative;
    text-decoration: none;
	top:20em;
	left:10em;
}
a.info span {
    display: none; /* on masque l'infobulle */
}
a.info:hover span {
    display: inline; /* on affiche l'infobulle */
	position:absolute;
	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
	top:-4em;
}

Aussi, j'ai remarqué que même avec un border:0px, le contour bleu est toujours présent... :/

[Vil'Coyote]

Merci de ta réponse.
Aussi, j'ai remarqué que même avec un border:0px, le contour bleu est toujours présent... :/

par ce que tu applique le 0px au style de ton <a> et non à ton image.

[JeanJean75]

Merci, en l'appliquant à l'image, ça marche. Par contre reste le problème de positionnement... :/

[JeanJean75]

Hop, Pour ceux qui ne comprendrais pas mon problème.

je vous poste un lien http://www.lesgourmetsexplorateurs.com/test/

Les icônes en question sont celles autours de la roue.