Cet article montrera la procédure pour changer l'image au survol en JavaScript.
Comment changer une image au survol en JavaScript ?
Pour changer l'image au survol, utilisez le ' surmouseover ' un événement. Lorsque la souris/le curseur est déplacé à travers un élément HTML ou l'un de ses enfants, l'événement onmouseover est déclenché.
Exemple 1 : Modifier l'image au survol en JavaScript
Dans un fichier HTML, utilisez la balise pour afficher l'image sur une page Web. Attachez le ' surmouseover ” événement qui appellera la fonction JavaScript lors du survol de l'image par la souris :
< identifiant img = 'menuImg' src = '1.jpg' surmouseover = 'survolez (ceci);' />
Dans un fichier JavaScript, définissez une fonction ' flotter ' avec le paramètre ' image ”. Dans la fonction définie, définissez l'image qui sera affichée au survol :
fonction flotter ( image )
{
img. src = '2.jpg'
}
Comme vous pouvez le voir, dans la sortie, lorsque nous survolons l'image actuelle, elle change soudainement :
Exemple 2 : Basculer l'image au survol
Dans l'exemple ci-dessus, l'image change lorsque la souris survole l'image, et la même image reste. Maintenant, dans cet exemple, la première image réapparaîtra lorsque la souris sortira de l'image. Cet effet est appelé effet de basculement. A cet effet, nous utiliserons le « surmouseover ' et ' onmouseout ” Propriétés HTML :
< identifiant img = 'menuImg' src = '1.jpg' surmouseover = 'survolez (ceci);' onmouseout = 'hoverOut(ceci)' />
' surmouseover » appelle le « flotter() » tandis que la fonction « onmouseout 'l'événement appelle la fonction' hoverOut() ” :
fonction hoverOut ( image ) {img. src = '1.jpg'
}
La sortie montre que l'image est modifiée avec succès lorsque la souris est sur l'image et qu'elle est modifiée lorsque la souris sort de l'image :
C'était tout à propos de l'image changeante en survol.
Conclusion
Pour changer l'image au survol, utilisez le ' surmouseover ' un événement. Pour basculer l'effet, utilisez le ' surmouseover ' attribut avec ' onmouseout ' un événement. Lorsque la souris/le curseur est déplacé à travers un élément ou l'un de ses enfants, l'événement onmouseover est déclenché, tandis que lorsque la souris/le pointeur est déplacé hors d'un élément, l'événement onmouseout se produit. Dans cet article, nous avons démontré la procédure pour changer l'image au survol en JavaScript.