Mise en forme d'un lien avec CSS [Résolu]

Bonjour,
Voilà, j'ai un lien sur une image dans une liste HTML. Je voudrais que cette image change au survol du lien. Ça fait des heures que je me bas avec ça, rien à faire.
Voici le codes.
HTML

<div id="menu">
		<ul>
		<li><a href="#">book</a></li>
		<li><a href="mailto:"#">contact</a></li>
		<li><a href="#">portrait</a></li>
		<li class="fb"><a href="#"><img src="http://cafe-copines.com/test/wp-content/themes/Cafe-copines/images/fb.gif"/></a></li>
		</ul>
		</div>

CSS

#head #copines #menu ul li.fb a:hover{
background:url(http://cafe-copines.com/test//wp-content/themes/Cafe-copines/images/fb2.gif) top left no-repeat;
				}

Si quelqu'un voit l'erreur…
Merci de votre aide
Modifié par hatfab (02 Feb 2011 - 21:57)

Bonjour,

En fait, tu ne peux pas *remplacer* du HTML (balise <img>) simplement par du CSS (background).

Le plus simple (et le moins accessible) est que l'image au départ soit aussi un background :

#head #menu a: { 
background:url(http://cafe-copines.com/test//wp-content/themes/Cafe-copines/images/fb.gif) top left no-repeat; 
                } 

#head #menu a:hover, #head #menu a:focus { 
background:url(http://cafe-copines.com/test//wp-content/themes/Cafe-copines/images/fb2.gif) top left no-repeat; 
                } 

Mais le mieux est de garder l'image et de faire le changement en JavaScript

Je ne connais pas du tout le Javascript. Je vais utiliser ta solution CSS.
Merci beaucoup.

En fait, ça ne fonctionne toujours pas . J'ai l'impression que ma balise <a> dans la class .fb n'est pas reconnue :

HTML

<div id="menu">
		<ul>
		<li><a href="#">book</a></li>
		<li><a href="#">contact</a></li>
		<li><a href="#">portrait</a></li>
		<li class="fb"><a href="#"></a></li>
		</ul>
		</div>

CSS

#head #copines #menu ul li.fb a{
					background:url(http://cafe-copines.com/test//wp-content/themes/Cafe-copines/images/fb.gif) top left no-repeat; 
				}
#head #copines #menu ul li.fb a:hover, #head #copines #menu ul li.fb a:focus{
					background:url(http://cafe-copines.com/test//wp-content/themes/Cafe-copines/images/fb2.gif) top left no-repeat;
				}

Le background s'affiche correctement si je retire le a (#head #copines #menu ul li.fb)

Voilà, merci
Modifié par hatfab (01 Feb 2011 - 20:01)

Salut,

Ton <a> a des dimensions ?
Car vu qu'il est vide si tu n'a pas spécifié de hauteur et largeur minimum tu risques de ne pas voir l'image de fond...

Et il serait mieux de mettre quand même un texte dans le <a> en le cachant pour les navigateurs graphiques avec une technique de remplacement de texte par image (genre text-indent:-9999px;) comme ça les navigateurs en mode texte (et les robots d'indexation de google) verrons ton lien.

oliviadox a écrit :

Ton &lt;a&gt; a des dimensions ?

Dans le CSS ou le HTML ?

hatfab a écrit :


Dans le CSS ou le HTML ?

C'est forcément dans le CSS puisqu'il s'agit de mise en forme

Pour donner une dimension à <a>, il faut préalablement le passer en block ou inline-block :

#head #menu a {
display: inline-block;
width: la-largeur-du-background-appliqué;

PS : évite de choisir des sélecteurs à rallonge tel que #head #copines #menu ul li a pour cibler tes liens. Cela n'apporte rien, te complique la vie à toi et au navigateur (performances)

Ok, merci de tes conseils, tout fonctionne !

Bonne journée…

Bravo
Tu considères que ce sujet est [Résolu] ?

Oui, résolu, avec de précieux petits conseils en bonus !

hatfab a écrit :
Oui, résolu, avec de précieux petits conseils en bonus !

Euh parfait. Dans ce cas, veux-tu bien marquer ton sujet comme résolu (suivre le lien que je t'ai donné dans mon message précédent) ?