changer l'image sur mouseover

StackOverflow https://stackoverflow.com/questions/1468085

  •  13-09-2019
  •  | 
  •  

Question

J'ai une page simple html / css, où je montre une image.

lorsque l'utilisateur déplace la souris sur l'image, je voudrais échanger sur l'image à une autre image.
En sortant de la zone d'image l'image ancienne doit être montré à nouveau.

Comment puis-je y parvenir? Une version qui fonctionne sans javascript serait mieux.

Merci d'avance!

Était-ce utile?

La solution

Vous pouvez utiliser les CSS pour changer l'image d'arrière-plan d'un élément lorsque vous passez la souris dessus. La pseudo-classe hover est pris en charge sur la plupart des éléments dans les navigateurs récents, mais d'être rétrocompatible (Internet Explorer 6), vous devez utiliser une balise d'ancrage pour hover travailler.

L'événement onclick dans le lien est juste pour que rien ne se passe si vous cliquez dessus, il n'a rien avec l'effet planant à faire. Vous pouvez bien sûr faire quelque chose lorsque l'image est cliqué, si vous le souhaitez.

HTML: 

<a href="#" id="picture" onclick="return false;"></a>

CSS: 

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}

Autres conseils

Cette semble (note assez concis et bien écrit: capotage CSS solutions ne fonctionneront pas sur IE6.) 

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top