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

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 :

• 

  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;
  }

  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 :

  • 

    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!