Cet article présentera comment utiliser JavaScript pour réaliser l'effet de cliquer sur les images. L'idée principale est d'utiliser l'attribut Data- * de HTML5 pour stocker le chemin d'image alternatif et écouter des événements de clic via JavaScript, changez dynamiquement les attributs SRC, réalisant ainsi la commutation d'image. Cet article fournira des exemples de code et des explications détaillés pour vous aider à comprendre et à ma?triser cet effet interactif couramment utilisé.

Structure HTML

Tout d'abord, nous devons définir des éléments d'image en HTML. La clé consiste à utiliser l'attribut Data-Src pour stocker le chemin d'image pour passer après le clic.

 <div class="col-lg-3">
  <img id="PBOOK" class="ImageBooks" src="images%20/%20rose1.jpg" data-src="images / rose2.jpg" alt="book couverture">
</div>

Dans cet exemple, l'attribut SRC pointe vers l'image initiale affichée (Images / Pink1.jpg), tandis que l'attribut Data-Src stocke l'image à passer après clic (images / Pink2.jpg). L'attribut ALT est nécessaire pour décrire le contenu de l'image et améliorer l'accessibilité.

Implémentation JavaScript

Ensuite, nous utilisons JavaScript pour écouter les événements de clic de l'image et implémenter la logique de la commutation d'image.

 const image = document.getElementById ("PBOOK");

image.onclick = () => {
  const newImage = image.dataset.src;

  image.dataset.src = image.src;
  image.src = newImage;
}

Ce code obtient d'abord l'élément d'image avec l'ID de PBOOK. Ensuite, un écouteur d'événements de clic est ajouté à l'élément. Lorsque l'image est cliquée, les opérations suivantes sont effectuées:

1. Obtenez le chemin d'image alternatif: Obtenez le chemin d'image alternatif stocké dans l'attribut Data-Src de Image.dataset.src et affectez-le à la variable NewImage.
2. échangez le chemin d'image: stockez la valeur d'attribut SRC de l'image actuelle dans image.dataset.src, de sorte que la prochaine fois que vous cliquez dessus, vous pouvez revenir à l'image d'origine.
3. Image de commutation: attribuez NewImage (chemin d'image alternatif) à image.src pour réaliser la commutation d'image.

Explication du code:

• Document.getElementById ("PBOOK"): obtient l'élément en HTML avec ID "PBOOK".
• image.onclick = () => {...}: lier une fonction de gestion des événements de clics pour l'élément d'image. Lorsque l'image est cliquée, cette fonction sera exécutée.
• image.dataset.src: accède à la valeur de l'attribut Data-Src dans l'élément d'image. L'ensemble de données est un objet DomStringMap qui vous permet de lire et d'écrire toutes les propriétés de données personnalisées.
• image.src: accéder ou définir l'attribut SRC de l'élément d'image, c'est-à-dire l'URL de l'image.

Exemple complet

La combinaison du code HTML et JavaScript est un exemple complet de course:

 

<adal>
  <title> Switcher d'image 
 head>
</title>

  <div class="col-lg-3">
    <img id="pbook" class="ImageBooks" src="images%20/%20rose1.jpg" data-src="images / rose2.jpg" alt="book couverture"   style="max-width:90%">
  </div>

  <cript>
    const image = document.getElementById ("PBOOK");

    image.onclick = () => {
      const newImage = image.dataset.src;

      image.dataset.src = image.src;
      image.src = newImage;
    }
  </cript>


</adal>

Remarque: Assurez-vous de remplacer les images / Pink1.jpg et les images / Pink2.jpg par votre chemin d'image réel. De plus, afin de faire savoir plus clairement aux utilisateurs que l'image est cliquable, vous pouvez ajouter le style = "curseur: pointeur;" style.

Résumé et précautions

• * `Data- attribut: ** data- * L'attribut est le moyen standard de stocker des données personnalisées dans HTML5. Ces propriétés peuvent être facilement accessibles et modifiées à l'aide de l'API DataSet`.
• écoute d'événements: utilisez l'élément.onclick pour simplement lier les événements de clic. Vous pouvez également utiliser la méthode addEventListener, qui est plus flexible et vous permet de lier plusieurs gestionnaires d'événements.
• Chemin d'image: assurez-vous que le chemin d'image est correct, sinon l'image ne sera pas affichée.
• Expérience utilisateur: vous pouvez ajouter des effets de transition pour rendre la commutation d'image plus fluide.
• Accessibilité: Ajoutez toujours l'attribut ALT à l'image pour décrire le contenu de l'image et améliorer l'accessibilité.

Grace à l'introduction de cet article, vous auriez d? ma?triser comment utiliser JavaScript pour réaliser l'effet de cliquer sur les images. Cette technologie peut être appliquée à divers scénarios, tels que l'affichage des produits, la bibliothèque d'images, etc. N'oubliez pas de vous concentrer sur l'expérience utilisateur et l'accessibilité pour rendre votre site Web plus convivial.

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!