Un lien agit sur une image

Bonjour

Comment est il possible de réaliser un lien texte avec rollover sur la couleur du texte. Au roll sur le texte une image juste à côté du lien passe aussi en roll, en changeant de couleur.

D'avance merci

Philippe

Salut,

Cherche dans la faq.
Il y a un tuto peut être adaptable.
L'astuce consiste à la base a afficher un span caché contenant une image qui est de base en display : none dans la balise <a>.En roll over sur le <a> le <span> passe en display : block (en :hover a).

Je m'en sert, tu peux voir ici :
http://lescourroies.free.fr/pages/liens.html
Survol la liste des sponsors.

On peux peut être procéder comme ça en modifiant le tuto pour coller a ton besoin :

Attends d'autres avis il se semble que cela relève certainement trop du bidouillage.

---- XHTML ----

<a>Mon lien
<span><img src="" alt="image différent pour état rollover masquée" /></span>
<img src="" alt="image de base affichée" />
</a>

----- CSS -----
a img {position: absolute
left: xxxx;
top: xxx;
}

a span {display:none;}

a:hover span {display:block;
position : absolute;
left: xxxx;
top: xxx;}

L'image du <a> contenant l'image de base et du a:hover span qui contient l'image superposée doivent être du coup positionnés pour assurer la superposition parfaite même quand le texte est de taille différente (redimensionnement de celui ci) sinon on risque le décalage.

Je pas sur d'avoir été clair et surtout de t'avoir donné une solution viable...

Enfin, t'as un lien pour exemple et ce tutos est dans la FAQ, pour ma bidouille je l'ai pas testé et il se peut que ce soit pas bon.

Mais le sujet m'intéresse aussi , je testerai ça...
Modifié par Hum (30 Aug 2006 - 23:02)

Bonjour

Merci pour ton aide

Ce script semble agir de la façon suivante
Au départ aucune image dans le span n'est visible. Au roll sur le lien texte l'image du span s'affiche.
Je cherche plutôt à afficher une image au départ et la changer quand je passe la souris sur le lien
Merci de votre aide

Philippe

Salut.

Si ton image est purement décorative, elle peut être placée en background sur le lien en question, et tu peux te servir de la pseudo classe :hover pour réaliser un rollover compatible avec tous les navigateurs.