Comment contrôler par programme l'attribut source de l'image en JavaScript ?

Contrôle programmatique de l'attribut source de l'image

Dans le domaine du développement Web, il est souvent nécessaire de modifier dynamiquement le contenu de nos pages. Une tâche courante consiste à modifier l'attribut source d'une balise d'image. Comprendre comment y parvenir à l'aide de JavaScript est essentiel pour créer des applications Web réactives et interactives.

À l'aide de la balise HTML5 img, nous pouvons afficher une image sur une page Web. En accédant à l'attribut src de cette balise, nous pouvons contrôler l'image affichée. Explorons comment procéder.

Changement dynamique de la source de l'image

Pour modifier par programme l'attribut src, nous devons d'abord identifier la balise img à l'aide de son identifiant ou d'un autre identifiant unique. Une fois que nous avons une référence à la balise, nous pouvons utiliser JavaScript pour modifier sa propriété src.

Par exemple, pour modifier l'attribut src d'une balise img avec un identifiant de "myImage" pour afficher une nouvelle image, nous utiliserions le code suivant :

<code class="javascript">document.getElementById("myImage").src = "new-image.jpg";</code>

Gestion des événements et des mises à jour de la source d'image

Dans le scénario donné, où l'attribut src d'une balise img doit être modifié lors d'un événement, nous pouvons exploiter des écouteurs d'événements pour déclencher la mise à jour des sources. Disons que nous souhaitons échanger l'image lorsqu'un utilisateur clique dessus.

<code class="html"><img id="edit-save" src="../template/edit.png" alt="Edit" onclick="changeImage()" /></code>

<code class="javascript">function changeImage() {
  document.getElementById("edit-save").src = "../template/save.png";
}</code>

En ajoutant l'attribut onclick à la balise img et en l'associant à une fonction JavaScript, nous nous assurons que la source de l'image est mis à jour lorsque l'on clique sur l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!