En utilisant JavaScript et jQuery, il existe différentes manières de modifier le chemin de l'image indiqué dans l'attribut src de l'élémentdans un document HTML.
Comment modifier l'attribut src de l'élément img à l'aide de JavaScript−
Utilisez l'attribut src en JavaScript.
Comment modifier l'attribut src de l'élément img à l'aide de jQuery−
Utilisez la méthode attr()
Utilisez la méthode prop()
Discutons en détail des méthodes répertoriées ci-dessus pour modifier le src de l'élément img, une par une.
JavaScript nous permet d'utiliser l'attribut src pour obtenir la valeur qui lui a été attribuée et également de mettre à jour ou de modifier la valeur du même attribut. Il s'agit d'une manière très courante de modifier la valeur de l'attribut src d'un élément img.
La syntaxe suivante vous expliquera comment utiliser l'attribut src en JavaScript pour modifier la valeur de l'attribut src de l'élément img -
Selected_image_element.src = " new value ";
Comprenons la mise en œuvre pratique de cette approche à travers un exemple de code.
Étape 1− Dans la première étape, nous ajouterons un élément img avec un attribut src qui lui est associé, dont nous modifierons la valeur plus tard en utilisant la propriété src en JavaScript.
Étape 2- Dans cette étape, nous ajouterons un élément bouton avec un événement onclick qui appelle une fonction pour changer le src de l'image lorsque l'utilisateur clique sur le bouton.
Étape 3- Dans la prochaine étape, nous définirons une fonction JavaScript dans laquelle nous obtiendrons l'élément img en utilisant son ID, puis modifierons l'attribut src à l'aide de l'attribut src et basculerons entre les deux images.
Étape 4- Dans la dernière étape, nous attribuerons la fonction à l'événement onclick défini dans la dernière étape pour voir les modifications sur l'écran de l'utilisateur.
L'exemple suivant vous expliquera comment utiliser réellement l'attribut src en JavaScript pour modifier l'attribut src d'un img.
Change the src attribute of an img element
The image shown below will be changed once you click the button.
Dans cet exemple, nous utilisons l'attribut src en JavaScript pour modifier l'attribut src de l'élément img dans le document HTML. Ici, nous basculons entre deux images à chaque fois que vous cliquez sur le bouton.
Nous pouvons également utiliser la méthode attr() en JavaScript pour modifier l'attribut src.
Méthode attr()- La méthode attr() accepte deux paramètres, le premier paramètre est le nom de l'attribut à modifier, exprimé sous forme de chaîne, et l'autre paramètre est la nouvelle valeur à attribuer à l'attribut.
La syntaxe suivante vous expliquera comment la méthode attr() avec paramètres est implémentée −
attr(" attribute_name ", " new_value ");
Comprenons la mise en œuvre de cette approche en détail avec un exemple de code.