Maison > interface Web > tutoriel CSS > Comment puis-je facilement échanger des images en un clic sans JavaScript compliqué ?

Comment puis-je facilement échanger des images en un clic sans JavaScript compliqué ?

Susan Sarandon
Libérer: 2024-11-16 17:19:03
original
475 Les gens l'ont consulté

How Can I Easily Swap Images on Click Without Complicated JavaScript?

Modification des images en cas de clic avec simplicité

Votre requête concernant la modification d'image en cas de clic met en évidence la nécessité d'une solution simple sans code JavaScript excessif. Voici une approche qui exploite HTML et JavaScript pour obtenir le résultat souhaité.

Marquage HTML :

Attribuez un identifiant unique à chaque image à l'aide de l'attribut "id" :

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">
Copier après la connexion
Copier après la connexion

Fonction JavaScript :

Créer un JavaScript fonction pour gérer l'échange d'images au clic :

function swapImage(imageId) {
  var image = document.getElementById(imageId);
  if (image.src.endsWith(".jpg")) {
    image.src = image.src.replace(".jpg", ".png");
  } else {
    image.src = image.src.replace(".png", ".jpg");
  }
}
Copier après la connexion

Gestion des événements :

Attachez un écouteur d'événement "onclick" à chaque image, en passant l'ID de l'image correspondante :

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">
Copier après la connexion
Copier après la connexion

Fonctionnalité :

Lorsque vous cliquez sur un image, la fonction swapImage() est invoquée, qui vérifie l'extension de fichier actuelle de l'image. S'il s'agit de ".jpg", la fonction le remplace par ".png", modifiant ainsi l'image. S'il s'agit de ".png", la fonction inverse le processus et le remplace par ".jpg".

Cette approche exploite HTML et JavaScript pour modifier les images en un seul clic sans avoir besoin de classes CSS ou de pseudo supplémentaires. sélecteurs, fournissant une solution simple et efficace à votre requête.

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!

source:php.cn
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