Comment puis-je modifier dynamiquement une source d'image à l'aide de JavaScript en un clic ?

Modification dynamique de la source de l'image à l'aide de JavaScript

Dans le développement Web, il peut être nécessaire de modifier l'attribut source d'une balise d'image (balise img) par programme pour afficher différentes images basé sur l’interaction de l’utilisateur ou le contenu dynamique. Pour y parvenir, JavaScript propose diverses méthodes pour manipuler les éléments HTML.

Considérez le scénario suivant :

<img src="../template/edit.png" name="edit-save" alt="Comment puis-je modifier dynamiquement une source dimage à laide de JavaScript en un clic ?"><br>

Initialement, la balise d'image affiche une image avec la source "edit.png". Le but est de changer cette source en "save.png" en cliquant sur l'image. Pour y parvenir, une balise HTML a avec un gestionnaire d'événements onclick peut être utilisée, comme indiqué ci-dessous :

<a href="#" onclick="edit()"></a><br>

La modification ( ) la fonction peut ensuite être implémentée en JavaScript pour effectuer la modification de source souhaitée :

function edit()<br>{<pre class="brush:php;toolbar:false">var inputs = document.myform;
for(var i = 0; i <p>}<br></p>

> ;

En attribuant un identifiant à la balise image ("edit-save" dans ce cas), le code JavaScript peut accéder et modifier son attribut src. L'extrait fourni récupère l'élément HTML par identifiant et définit son attribut src sur la source souhaitée, modifiant ainsi l'image affichée.

Il convient de noter que le code d'origine que vous avez fourni a tenté de gérer la modification src dans l'édition ( ), ce qui entraînait le problème de nécessiter deux clics pour changer de source. En séparant la manipulation de la source de l'image en une étape distincte, vous pouvez éviter cet inconvénient et vous assurer que la source de l'image change immédiatement au premier clic.

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!