[Résolu] Hover sur une image dans un lien, style Alsa

Bonjour,

Je dois faire un menu avec des images dans les liens, un genre d'icône avec une police spécial, bref, pour les mettre c'est pas un problème, mais je dois faire un hover dessus, quand on passe avec la souris, l'image doit changer.

Un peu comme les 3 liens "Apprendre, Forum Emploi" en haut sur le site Alsacreations.com, comment cet effet est-il réalisé? J'ai fouiné un peu dans le css, je n'ai rien trouvé, c'est possible qu'il soit fait avec du javascript?

Merci d'avance.
Modifié par Blogger (22 Jul 2010 - 13:01)

Salut,

En vitesse, c'est juste une image avec le halo qui s'affiche lors du survol du <li> :

ul#menu li:hover, ul#menu li:focus { 
background:url("img/halo.png") no-repeat scroll 0 35px transparent; }

Mais ton cas a l'air un peu différent, je pourrais mieux t'aider si tu fournis un exemple concret.
Modifié par BeliG (22 Jul 2010 - 10:53)

Salut,

J'ai du loupé ce bout de code dans le CSS d'Alsacréations Merci pour ta réponse.
En y réfléchissant un peu mieux, mon cas n'est pas si différent, Voici l'image que je dois mettre dans mon menu:



Et une fois qu'on survol le lien, l'image doit être comme ça: (avec le texte en vert)



J'ai trouvé comment faire, j'ai fait une image avec juste l'icône et le texte en vert, le fond est transparent, je la met comme ça dans mon menu:

<ul>
    <li><a href=""><img src="accueil.png" alt="Accueil" /></a></li>
</ul>

Et après je met en css en fond l'image qui à le fond gris sans le texte.
Et au a:hover je change le background pour mettre l'image avec le fond rouge.

Au final je m'en sort avec 3 images








Et un menu accessible

Merci
Modifié par Blogger (22 Jul 2010 - 13:01)