CSS : lien image, changement au survol

Question

J'ai une image qui est un lien. Je veux afficher une image différente lorsque l'utilisateur survole le lien.

Actuellement, j'utilise ce code :

<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>

div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

Mais j'ai beaucoup de problèmes : le div ne reprend pas les règles CSS (l'élément n'affiche tout simplement pas les règles CSS correspondantes lorsque je l'affiche dans Firebug).

C'est peut-être parce que (comme je le sais) c'est du HTML invalide : on ne peut pas mettre un <a> autour d'un <div> . Cependant, si je passe à <span> alors il semble que j'ai de plus gros problèmes, parce que vous ne pouvez pas définir une hauteur et une largeur sur un span de manière fiable .

Aidez-nous ! Comment puis-je faire mieux ?

Answer 1

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

utiliser une classe pour le lien lui-même et oublier le div.

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}

Answer 2

Si vous n'avez que quelques endroits où vous souhaitez créer cet effet, vous pouvez utiliser le code html suivant qui ne nécessite aucune css. Il suffit de l'insérer.

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" 
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>

Veillez à écrire les guillemets exactement comme ils le sont ici, sinon cela ne fonctionnera pas.

Answer 3

Cela pourrait être fait avec <a> seulement :

#twitterbird {
 display: block; /* 'convert' <a> to <div> */
 margin-bottom: 10px;
 background-position: center top;
 background-repeat: no-repeat;
 width: 160px;
 height: 160px;
 background-image: url('twitterbird.png');
}
#twitterbird:hover {
 background-image: url('twitterbird_hover.png');
}

Answer 4

C'est mieux si vous définissez l'élément a de cette façon

display:block;

et ensuite par sprites css définissez votre arrière-plan

Edit : regardez cet exemple http://jsfiddle.net/steweb/dTwtk/

Answer 5

Si vous donnez généralement un span la propriété display:block il se comportera alors comme un div c'est-à-dire que vous pouvez définir la largeur et la hauteur.

Vous pouvez également ignorer le div o span et il suffit de définir le a le à display: block et lui appliquer le style backgound.

<a href="" class="myImage"><!----></a>

    <style>
      .myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
    </style>