Comment mettre à jour dynamiquement l'URL source d'une balise d'image à l'aide de JavaScript ?

Modifier l'URL source d'une image à l'aide de JavaScript

Pour mettre à jour dynamiquement l'URL source d'une balise d'image à l'aide de JavaScript, il est important de s'assurer gestion appropriée des écouteurs d'événements et de l'identification des éléments.

Solution :

1. Ajouter un identifiant à la balise img :
   Attribuez un identifiant unique à la balise img. Cela vous aidera à le cibler spécifiquement dans le code JavaScript.

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

2. Accédez à l'élément Image :
   Utilisez la méthode document.getElementById() pour obtenir une référence à l'élément img.

   <code class="javascript">var editSave = document.getElementById("edit-save");</code>

3. Modifier l'attribut src :
   Une fois que vous avez la référence de l'élément image, vous pouvez modifier son src attribut pour mettre à jour la source de l'image.

   <code class="javascript">editSave.src = "../template/save.png";</code>

Exemple :

Dans votre code fourni, ajoutez un identifiant comme suit :

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

Ensuite, modifiez votre fonction JavaScript :

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

Avec cette approche, la source de l'image sera mise à jour correctement d'un simple clic 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!