Modifier une image au survol

Voilà alors je décide de partagé une petit astuce avec vous, car je trouve qu'elle vaut le coup et qu'elle embellit vachement les forum =)

Tout d'abord, de quoi il s'agit? : C'est en fait un code, qui va permettre de changer l'image, lorsque la souris passera dessus. Ainsi, on peut donner l'illusion, sans recourir au flash, que lorsque l'on passe la souris sur une image, cette dernière se met à briller. Bien sûr, ce n'est qu'une suggestion d'utilisation, ensuite, libre à vous de vous en servir comme bon vous semble.

DANS LE CSS

Code:

/*Bouton 1 sans survol*/
#bouton1 {
  display: inline-block;
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
}
/*Bouton 1 avec survol*/
#bouton1:hover {
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
} 

/*Bouton 2 sans survol*/
#bouton2 {
  display: inline-block;
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
}
/*Bouton 2 avec survol*/
#bouton2:hover {
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
} 

SUR LA PAGE

Code:


<a id="bouton1" href="http://www.domaine.com/"></a>
<a id="bouton2" href="http://www.domaine.com/"></a>

Comment le modifier? :
1 .Placez dans l'URL de "bouton 1:" L'url de l'image non survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
2. Placez, dans L'URL de "bouton 1:hover" L'url de l'image survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
3. Faites pareil pour le bouton 2 et les autres éléments si vous en avez.

À noter qu'on a utilisé des liens ici pour simuler une navigation, mais cela aurait aussi pu se faire avec une div, un span ou autres.

Voilà c'est fait!

En espérant avoir été clair et vous avoir aidé!

Je l'utilise déjà celle-ci, très sympa pour l'esthétique ;P Merci ^^

Merci ^^ Il complique un peu celui de Riku, mais au final avec le CSS c'est aussi plus simple, donc c'est un bon complément

J'avais peur de ne pas comprendre au départ mais en fait c'est tellement bien expliqué que ça en est relativement simple ! Merci pour cette astuce, bien utile pour l'esthétique d'un forum mine de rien ^^

Ah merci , je cherché ce code depuis bien longtemps. Je viens de l 'installer sur mon forum ,ça marche à la perfection.

Merci

Très bonne astuce !

Hello, sympa comme système, sur le principe, puisqu'il permet de ne pas avoir à passer par javascript, fort avantage pour les personnes qui le désactivent.
Cependant lorsque tu survoles ton lien l'image en mode HOVER va se charger, et c'est là le danger, qu'arrive-t-il si une personne navigue rapidement (comme beaucoup de visiteurs finalement) et que les images de ta page ne sont pas encore toutes chargées...

Réponse : l'effet hover n'est pas réactif assez rapidement, et ce sera pareil pour tous les boutons (liens).

J'ai d'ailleurs une solution qui consiste à utilser qu'une seule est même image pour le même lien...
Sous-entendu sur l'image tu as déjà les deux formes du bouton, ainsi quand le visiteur charge la page il charge les deux états en même temps !

L'astuce consiste donc à positionner par exemple l'état hover en dessous de l'état normal sur ton image (physiquement donc). Lorsque tu créés ton bouton HTML/CSS tu vas lui donner des valeurs width et height qui correspondent à 100% de width et 50% de height de l'image physique (logique puisque tu ne prends qu'un des deux états.
Ensuite en position normal tu précises la position left top dans bg-position.
Lorsque tu es en hover tu précises à nouveaux la position, mais cette fois de la sorte : left 50%;

C'est une forme de masque d'écrêtage en code CSS en quelque sorte ^^

Mais je ferais un tuto, d'ailleurs pour les fouineurs de codes sources, sur HIF j'utilise ce principe pour le menu de votre espace perso

A la prochaine !

Oh bout de plusieur essai j'ai enfin réussit à l'utiliser!!!! Merci beaucoup pour cette astuce >w<

Merci.

Je déterre un vieux topic ! 
Merci pour ce tuto :)

Mais même question que Petit canard, est-ce applicable à la barre des menus FA, et si oui, comment ? 

Merci d'avance ! :)