[Résolu] Problème de "visibility" sur un lien image avec IE

Bonjour,

Je souahite faire apparaître une image lorsque l'on passe la souris sur certains liens. J'ai trouvé une solution fort simple ma foi pour Fierfox. Elle ne fonctionne pas avec IE (m'aurait étonné! )

HTML:

<a class="lien_img" href="">Alain Fossé<img src="./images/af.jpg" alt="Alain Fossé" /></a>

CSS:

.lien_img {position: relative;}

.lien_img img {
	visibility: hidden;
	position: absolute;
	bottom: 25px;
	left: 15px;
	border: 1px solid #E7B53C;
}
.lien_img:hover img {visibility: visible;}

Merci!
Modifié par mad_shreder (14 Apr 2006 - 14:15)

Bonjour,

Sous IE, l'effet :hover ne s'applique qu'aux éléments <a>. Il te reste 2 solutions :
- à code constant, utilisation de javascript pour contourner la faiblesse de IE
- modifier ton code et introduire ton image en background d'un élément <a>

Merci,

- Si j'utilise le background, je devrai mettre mon lien en "display: block" pour lui donner une dimension; or c'est un lien au sein d'un texte et doit donc être affiché en ligne. Autre inconvénient, je ne pourrai plus mettr eun bordure juste à l'image, elle englobera aussi le lien textuel.

- je ne connais pas javascript mais je vais m'y mettre!

Ce que je ne comprends pas, c'est que le :hover est bien appliqué à un lien <a>. Une astuce similaire est utilisée dans l'exemple d'infos-bulles dans le livre de Raphaël. Je ne comprends pas pourquoi çà ne marche plus avec une image.

En tous cas merci!

a écrit :
Si j'utilise le background, je devrai mettre mon lien en "display: block" pour lui donner une dimension

Non je ne crois pas que cela soit strictement nécessaire. Le choix de loger l'image en background ou en tant qu'élément dans le HTML dépend de l'interprétation faite du rôle de cette image : soit elle est décorative (on la met alors background) soit elle fait partie intégrante du contenu de la page (et elle a sa place sous forme d'un élément <img>)

a écrit :
je ne connais pas javascript lol mais je vais m'y mettre!

Il existe des solutions toutes faites. Personnellement j'utilise parfois IE7.

a écrit :
Ce que je ne comprends pas, c'est que le :hover est bien appliqué à un lien <a>. Une astuce similaire est utilisée dans l'exemple d'infos-bulles dans le livre de Raphaël. Je ne comprends pas pourquoi çà ne marche plus avec une image.

Au temps pour moi, tu as complètement raison. Cela doit fonctionner, et je viens de vérifier cela fonctionne. Reprends à la lettre le code fourni par Raphaël, tu devrais t'en sortir.

Je viens de me rendre compte que le problème venait du positionnement des images qui apparaissent au survol des liens: lorsque j'enlève les indications "bottom: ..px et left: ..px" çà fonctionne bien. C'est l'attribut "bottom" qui semble ne pas être interprêté de la même manière par IE...

Mais je garde ton lien en favori, très intéressant!