Modifier le SRC d'une balise IMG

Lors de la conception d'une interface utilisateur interactive, il peut y avoir une exigence pour ajouter et supprimer certaines images de temps à autre pour engager l'utilisateur. Par exemple, ajouter plusieurs images pour donner à l'utilisateur une meilleure compréhension du concept ou création d'effets. Dans de telles situations, modifier le SRC d'un «IMG”TAG assiste par programme à faire ressortir un site.

Cet article décrira les approches pour modifier le SRC d'une étiquette IMG par programme.

Comment modifier / remplacer le SRC d'une balise IMG?

Pour modifier le SRC d'une étiquette IMG par programme, appliquez les approches suivantes:

• "SRC" attribut.
• jQuery's "att ()" méthode.

Méthode 1: Modifier le SRC d'une balise IMG en utilisant l'attribut SRC

Le "SRC»L'attribut spécifie l'URL d'un fichier externe. Cette approche peut transformer l'image allouée avec une nouvelle.

Exemple
Présentation des lignes de code indiquées ci-dessous:

Changement

Dans l'extrait de code ci-dessus:

• Tout d'abord, spécifiez l'image dans le «”Tag via le"SRC" attribut.
• Après cela, créez un bouton ayant un attaché "sur clic”Événement invoquant la fonction myFonction ().
• Maintenant, dans le code JavaScript, définissez la fonction nommée «myFunction ()". Dans sa définition, redirigez l'image spécifiée par son identifiant à l'aide du «getElementByid ()" méthode.
• Enfin, attribuez un nouveau chemin à l'image accessible à l'aide du «SRC" attribut.
• Cela changera en conséquence l'image ajoutée sur le déclencheur du bouton.

Sortir

Dans la sortie ci-dessus, on peut observer que l'image spécifiée est modifiée avec une nouvelle image sur le bouton cliquer.

Méthode 2: Modifier par programme le SRC d'une balise IMG via jQuery

jQuery's "att ()«La méthode est utilisée pour définir ou renvoyer des attributs et des valeurs des éléments sélectionnés. Cette méthode peut être appliquée pour modifier le SRC d'une balise IMG en allouant un nouveau chemin à l'image récupérée.

Syntaxe

$ (sélecteur).attr (attribut, valeur);

Ici:

• "attribut»Indique le nom de l'attribut.
• "valeur»Correspond à la nouvelle valeur de l'attribut.

Exemple
Passons aux lignes de code:

Changement

Dans le bloc de code ci-dessus:

• De même, incluez une image utilisant le «SRC"Attribut ayant le déclaré"identifiant".
• Dans la ligne suivante, créez un bouton pour attacher un "sur clic"Événement qui invoquera la fonction"myFunction ()".
• Maintenant, spécifiez la bibliothèque jQuery à l'aide du «SRC" attribut.
• Dans le code JS, déclarez une fonction nommée «myFunction ()".
• Dans sa définition, accédez à l'image spécifiée et allouer un nouveau chemin via le «att ()" méthode.
• En conséquence, l'image sera transférée sur le bouton Click.

Sortir

On peut voir que l'image a été modifiée sur le déclencheur du bouton.

Conclusion

Pour modifier / remplacer le SRC d'une balise IMG par programme à l'aide de JavaScript, appliquez le «SRC"Attribut ou jQuery"att ()" méthode. Ces approches peuvent être utilisées pour simplement récupérer l'image spécifiée et la transmettre à l'aide d'un attribut prédéfini et d'une méthode, respectivement. Cet article a illustré les approches pour modifier / remplacer le SRC d'une étiquette IMG par programme.