J'ai une image dans mon code HTML et je veux faire en sorte que lorsque ma souris survole l'image, elle passe à l'autre image, et lorsque la souris ne l'est pas survolant l'image, il revient à la valeur par défaut. Comment programmer cela dans une balise
3 Réponses :
Aucune balise nécessaire. Utilisez onmouseover et onmouseout pour changer la source de l'image.
onmouseover exécutera une action lorsque votre souris passera sur l'image . Dans ce cas, nous utilisons this.src pour définir l'image src sur une autre image.
onmouseout exécutera une action lorsque votre souris sort de l'image . Dans ce cas, nous utilisons à nouveau this.src pour définir l'image sur l'image par défaut.
<img title="Hello" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" onmouseover="this.src='https://www.ctvnews.ca/polopoly_fs/1.4037876!/httpImage/image.jpg_gen/derivatives/landscape_1020/image.jpg'" onmouseout="this.src='https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681'" />
Vous pouvez utiliser css pour cela comme:
.react {
background: url('../img/React_Monoo.png');
}
.react:hover {
background: url('../img/React_Colored.png');
}
ici react est un nom de classe
var image = document.getElementById("image");
//Now, we need to add an Event Listener to listen when the image gets mouse over.
image.addEventListener('mouseover', function(){
image.src = "path/to/newimage"
})
image.addEventListener('mouseout', function(){
image.src = "path/to/otherimage"
})