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
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:
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
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 ()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
La description du code est comme ci-dessous:
Code javascript
Fonction changecr ()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.