Comment échanger des images en javascript

Maintenant, créez un bouton avec un événement OnClick redirigeant vers la fonction nommée «swapimages ()»:

Après cela, spécifiez la source de l'image par défaut avec son ID et sa hauteur ajustée respectivement:

Maintenant, définissez la fonction nommée «swapimages ()". Il accédera, premièrement, à l'image spécifiée en utilisant le «document.getElementByid ()" méthode. Ensuite, appliquez le «SRC«Attribut avec le«correspondre()”Méthode pour appliquer une vérification de l'image par défaut dans son argument. Si la source spécifiée correspond à l'image par défaut, le «SRC»L'attribut changera sa valeur en une image différente. Cela entraînera l'échange des deux images:

La sortie correspondante sera la suivante:

Méthode 2: Échangez des images en javascript en utilisant la méthode incluse () avec un événement OnMouseOver

Le "comprend ()»La méthode vérifie si une chaîne contient une chaîne spécifiée dans son argument et le«onduir»L'événement se produit lorsque le curseur est déplacé sur l'élément spécifié. Plus précisément, ces techniques peuvent être implémentées pour vérifier la source d'image et échanger les images spécifiées sur le survol.

Exemple
Ici, nous inclurons d'abord l'élément de tête suivant:

Échanger les images

Ensuite, spécifiez la source d'image et ajustez ses dimensions. Incluez également un événement nommé «onduir”Qui accédera à la fonction nommée swapimages () avec l'ID spécifié:

Après cela, définissez la fonction nommée «swapimage ()". Maintenant, répétez les étapes discutées précédemment pour accéder à l'image par défaut.

Dans l'étape suivante, appliquez le «comprend ()«Méthode pour vérifier si le«SRC»L'attribut inclut l'image par défaut dans son argument. Si c'est le cas, l'attribut particulier se verra attribuer un nouveau chemin d'image pour échanger sur le survol de la souris. Dans l'autre cas, la même image sera récupérée dans «autre" condition:

Sortir

Méthode 3: Échange d'images côte à côte à l'aide de l'attribut SRC

Dans cette méthode particulière, les deux images spécifiées seront échangées côte à côte en accédant aux images et en les égalisant en utilisant le «SRC" attribut.

Exemple
Tout d'abord, nous inclurons les images souhaitées avec leurs chemins et dimensions spécifiés:

Ensuite, créez un bouton avec un "sur clic”Événement invoquant la fonction nommée swapimages () lorsque vous cliquez:

Maintenant, nous déclarerons une fonction nommée «swapimages ()«Qui accédera d'abord à leurs images par leurs identifiants en utilisant le«document.getElementByid ()" méthode. Puis le "SRC"L'attribut liera les images accessibles de telle manière que le SRC de la première image équivaut à la seconde, et donc les images sont échangées lorsque le bouton ajouté est cliqué:

Sortir

Nous avons discuté de diverses méthodes pour échanger des images en javascript.

Conclusion

Pour échanger des images en JavaScript, utilisez le «correspondre()«Méthode avec un«sur clic”Événement pour correspondre à l'image par défaut et l'échanger avec une image différente sur le bouton cliquer, le"comprend ()«Méthode avec un«onduir»Événement pour échanger l'image par défaut avec l'image spécifiée sur la souris en survol ou égaliser le«SRC»Attribut des deux images pour échanger les images côte à côte. Cet article a démontré les méthodes pour échanger des images en javascript.