Comment changer d'image source javascript

JavaScript peut s'intégrer à HTML pour répondre aux demandes des utilisateurs. Par intégration, les utilisateurs peuvent utiliser une fonctionnalité pour modifier la source d'image. Par exemple, la propriété SRC est utilisée pour spécifier la source d'image. Les sources peuvent inclure un système de fichiers local ainsi que l'URL de l'image. Ce guide sert à modifier le fichier source d'image en utilisant la propriété SRC. Tous les derniers navigateurs prennent en charge la propriété SRC pour localiser l'image source.

Ce message sert les résultats d'apprentissage suivants:

• Comment changer la source d'image en javascript
• Exemple 1: Modifier la source d'image de l'image de fichier local en javascript
• Exemple 2: Modifier l'image Source d'image basée sur le Web en JavaScript

Comment changer la source d'image en javascript

JavaScript est essentiel pour changer dynamiquement l'affichage de l'image. Par exemple, le IMG L'élément HTML fournit le SRC propriété pour modifier la source de l'image. La source de l'image peut être un système local ou toute image URL.

La syntaxe pour appliquer la propriété SRC à l'aide de JavaScript est fournie ci-dessous:

Syntaxe

document.GetElementByid ("Myimageid").src = "Newsource.png ";

Paramètre

La description des paramètres est la suivante:

• myimageide: Spécifie l'ID d'image.
• SRC: fait référence à la source de l'image.

Exemple 1: Modifier la source de l'image de l'image locale

Un exemple est adapté pour modifier la source d'une image via le fichier local en javascript. L'exemple comprend des fichiers de code HTML et JavaScript.

Code HTML

Exemple pour modifier la source d'image en javascript

Bouton de modification de l'image

Dans ce code, le SRC L'attribut est utilisé pour récupérer l'image "ordinateur.jpg". Après cela, un «Bouton de modification de l'image"Est ajouté au fichier html qui déclenche le Changerscr () méthode. Le Changerscr () La méthode est écrite dans un fichier javascript.

Code javascript

Fonction changecr ()
document.getElementByid ("imgid").src = "livres.jpg ";

Dans ce code, le changerc () La méthode récupère l'élément en utilisant son ID "imgid»Et définit la valeur du«SRC»Attribut de cet élément.

Sortir

La sortie montre qu'après avoir appuyé sur le «Bouton de modification de l'image"Le fichier source de l'image est modifié et la nouvelle image s'affiche.

Exemple 2: Modifier la source d'image d'une image Web

Un autre exemple est utilisé pour changer la source d'image via l'URL en JavaScript. Le code complet est divisé en fichiers HTML et JavaScript.

Code HTML

Exemple pour modifier la source d'image Web dans JavaScript

Changer l'image

La description du code est comme ci-dessous:

• Premièrement, le largeur et hauteur de l'image sont affectées à l'image à l'intérieur Mots clés.
• Après cela, le URL d'une image est fournie par le SRC propriété pour afficher l'image dans la fenêtre du navigateur.

Code javascript

Fonction changecr ()
document.getElementByid ("imgid").src = "https: // cdn.pixabay.com / Photo / 2022/07/28/23/42 / Rainbow-7350780__340.jpg ";

Dans ce code, le Changerscr () La méthode est utilisée pour déclencher un événement lorsque l'utilisateur clique sur le bouton pour modifier la source de l'image.

Sortir

La sortie illustre que lorsqu'un utilisateur clique sur le «Changer l'image», La nouvelle image est remplacée par la.

Conclusion

JavaScript fournit un SRC Attribut pour modifier la source d'image en spécifiant le chemin d'accès du fichier. Par exemple, le getElementId () la méthode est utilisée pour extraire l'élément HTML via id, puis le src la propriété changera l'image source. Après l'extraction, le nouveau fichier image source est attribué. Ici, vous avez appris à changer la source d'image en javascript. Pour cela, nous avons démontré un ensemble d'exemples dans divers scénarios.