Comment changer dynamiquement le chemin de l'image dans jquery

Dans le développement Web, jQuery est souvent utilisé, c'est une bibliothèque JavaScript rapide et concise. Parfois, nous devons afficher différentes images sur la page, par exemple afficher une image différente lorsque la souris survole. À l’heure actuelle, nous pouvons utiliser jQuery pour modifier dynamiquement le chemin de l’image afin de donner à la page un effet plus riche.

La méthode d'implémentation pour changer dynamiquement le chemin de l'image avec jQuery est très simple. Partageons l'opération spécifique ci-dessous.

Dans la première étape, nous devons écrire le code de l'image dans le document HTML :

<img src="img/default.jpg" alt="默认图片" id="myImg">

Il s'agit de la balise d'image la plus basique, où l'attribut src est le chemin de l'image, l'attribut alt est la description de l'image , et l'attribut id est pour plus tard Facile à utiliser et à configurer.

Dans la deuxième étape, nous devons obtenir l'objet de la balise d'image dans le script jQuery :

var myImg = $("#myImg");

Ici, nous utilisons le sélecteur dans jQuery pour trouver la balise d'image correspondante dans la page via l'attribut id, et la nommons myImg .

Dans la troisième étape, nous pouvons utiliser la méthode .attr() pour changer le chemin de l'image :

myImg.attr("src", "img/hover.jpg");

Nous passons deux paramètres Le premier paramètre est le nom de l'attribut à modifier. Voici le src. attribut. Le deuxième paramètre est la valeur à modifier, et voici le nouveau chemin de l'image. La signification de ce code est de changer le chemin de l'image d'origine "img/default.jpg" en "img/hover.jpg".

La quatrième étape, nous pouvons appeler ce code dans l'événement de survol de la souris pour obtenir l'effet de changer l'image lorsque la souris est survolée :

myImg.hover(
  function() {
    myImg.attr("src", "img/hover.jpg");
  },
  function() {
    myImg.attr("src", "img/default.jpg");
  }
);

La méthode .hover() est utilisée ici, ce qui peut nous aider à enregistrer le survol de la souris et déplacer les événements et appeler respectivement les fonctions correspondantes. Le premier paramètre est la fonction à exécuter lorsque la souris est survolée, ici pour changer le chemin de l'image en "img/hover.jpg" ; le deuxième paramètre est la fonction à exécuter lorsque la souris est déplacée, ici pour modifiez le chemin de l'image vers l'original "img/default.jpg".

Maintenant, nous avons réussi à obtenir l'effet de changer dynamiquement le chemin de l'image. Cette méthode est très utile dans le développement réel et peut nous aider à obtenir rapidement des effets intéressants et à améliorer l'interactivité de la page.

En bref, lorsque nous utilisons jQuery, nous pouvons utiliser les nombreuses méthodes et techniques qu'il propose pour résoudre les problèmes pratiques auxquels nous sommes confrontés lors du développement de pages et obtenir deux fois le résultat avec la moitié de l'effort.

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!