Bonjour

Je cherche une explication (à ma portée) à un phénomène.

Si je veux obtenir un texte au survol d'un lien, je vois apparaître le texte en superposition, sans décalage d'aucune sorte en procédant comme ceci :
<a href="#" title="texte du survol">Lien</a>

Si je veux obtenir une image au survol d'un lien, en faisant
<a href="#"><img src="image.jpg"/>Lien</a>
l'image n'apparaît pas en superposition ni au survol mais immédiatement et en décalant la suite, je suppose parce que img correspond à un block

Avec un span, associé à un display : block , ça devrait marcher, sauf que non :
<a href="#"><span><img src="image.jpg"/></span>Lien</a>
Modifié par flocon (15 Jun 2009 - 13:58)
Hello flocon et bienvenue Smiley smile ,

l'attribut title que l'on peut utiliser avec la plupart des balises (dont le lien <a>) permet effectivement l'apparition d'une infobulle contenant du texte lorsque l'élément en question est survolé. Par contre il n'existe pas d'équivalent qui permette simplement d'afficher une image au survol Smiley murf ! C'est pour cette raison que ta balise <img> (qui est bien de type 'en-ligne' et pas de type 'bloc' Smiley cligne ) apparaît directement dans ta page.

Pour faire ce que tu veux tu pourrais t'inspirer du tuto Afficher / Masquer des éléments sans javascript ou encore faire une recherche sur Google avec tooltip (un bon millier de réponses en perspective Smiley ravi ).

A+
Administrateur
Bonjour et bienvenue, Smiley smile

Heyoan> ni l'un ni l'autre (bien au contraire Smiley nut ), img est de type inline-block
Felipe a écrit :
Heyoan> ni l'un ni l'autre (bien au contraire Smiley nut ), img est de type inline-block
Je parlais bien sûr ( Smiley biggol ) du rendu 'en-ligne' par opposition au rendu 'bloc' tel que défini dans la structure HTML et le rendu CSS des balises : bloc et en-ligne !

Et en fait il faut bien avouer qu'à l'exception de l'imbrication des balises et quelques tests avec display (en attendant qu'il soit bien implémenté) je me contente de la notion simplifiée en-ligne / bloc Smiley confused Smiley lol ...