Maison > interface Web > tutoriel CSS > Comment modifier les images en un clic sans JavaScript étendu ?

Comment modifier les images en un clic sans JavaScript étendu ?

Barbara Streisand
Libérer: 2024-11-17 15:53:02
original
672 Les gens l'ont consulté

How to Change Images on Click Without Extensive JavaScript?

Changer les images lors d'un clic : une approche simple

Lorsque nous sommes confrontés à la tâche d'échanger dynamiquement des images lors d'événements de clic, on peut dans un premier temps recourir à JavaScript ou jQuery pour une solution rapide. Cependant, pour des scénarios plus simples, il existe une alternative qui évite d'avoir recours à un code JavaScript étendu.

Pour modifier facilement les images, pensez à ajouter des identifiants uniques aux éléments de votre image, comme indiqué ci-dessous :

<ul>
  <li><img src="image1.png">
Copier après la connexion
Copier après la connexion

Ensuite, créez une fonction JavaScript simple pour gérer l'échange d'images au clic :

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}
Copier après la connexion

Dans cette fonction, la source actuelle de l'image est récupérée et remplacée par une nouvelle source qui inclut "_colored" dans son nom.

Enfin, ajoutez l'écouteur d'événement onclick à chaque image pour appeler la fonction changeImage() lorsque vous cliquez dessus :

<ul>
  <li><img src="image1.png">
Copier après la connexion
Copier après la connexion

Avec cette approche, les images peuvent être échangées de manière transparente au clic sans le besoin de JavaScript complexe ou de pseudo-sélecteurs.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal