Comment changer d'image sur planant en javascript

Sur les pages Web, le changement d'images sur l'effet de survol est une tâche courante. La tâche spécifique de la mise en place d'images sur le plan de volants est principalement utilisée sur les pages Web. Pour ce faire, utilisez les attributs HTML "onduir" et "onMouseout”Dans JavaScript pour déclencher des fonctions.

Ce message démontrera la procédure pour modifier l'image en survol en JavaScript.

Comment changer une image sur planant en javascript?

Pour changer l'image sur le volant, utilisez le «onduir" événement. Lorsque la souris / curseur est déplacée par un élément HTML ou l'un de ses enfants, l'événement OnMouseOver est déclenché.

Exemple 1: Modifier l'image sur le plan de volant en javascript
Dans un fichier html, utilisez la balise pour afficher l'image sur une page Web. Fixez le «onduir”Événement qui appellera la fonction JavaScript lorsque la souris planera sur l'image:

Dans un fichier javascript, définissez une fonction "flotter"Avec le paramètre"IMG". Dans la fonction définie, définissez l'image qui sera affichée sur le survol:

fonction Hover (IMG)

IMG.src = "2.jpg "

Comme vous pouvez le voir, dans la sortie, lorsque nous survons sur l'image actuelle, cela change soudainement:

Exemple 2: Basculez l'image sur planant
Dans l'exemple ci-dessus, l'image change lorsque la souris plane sur 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é l'effet de bascule. À cette fin, nous utiliserons le «onduir" et "onMouseout”Propriétés HTML:

"onduir»Appelle le«flotter()”Fonctionne que le«onMouseout"L'événement appelle la fonction"hoverout ()»:

fonction hoverout (img)
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 au sujet de l'évolution de l'image en volant.

Conclusion

Pour modifier l'image sur planant, utilisez le «onduir" événement. Pour l'effet de bascule, utilisez le «onduir"Attribut avec"onMouseout" événement. Lorsque la souris / curseur est déplacée dans un élément ou l'un de ses enfants, l'événement OnMouseOver est déclenché, tandis que lorsque la souris / pointeur est déplacé d'un élément, l'événement OnMouseout se produit. Dans cet article, nous avons démontré la procédure de modification de l'image sur le plan en JavaScript.