Heim >Web-Frontend >CSS-Tutorial >Wie kann ich Bilder ohne kompliziertes JavaScript einfach per Klick austauschen?

Wie kann ich Bilder ohne kompliziertes JavaScript einfach per Klick austauschen?

Susan Sarandon
Susan SarandonOriginal
2024-11-16 17:19:03479Durchsuche

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

Bilder per Klick einfach ändern

Ihre Anfrage zur Bildänderung per Klick unterstreicht die Notwendigkeit einer unkomplizierten Lösung ohne übermäßigen JavaScript-Code. Hier ist ein Ansatz, der HTML und JavaScript nutzt, um das gewünschte Ergebnis zu erzielen.

HTML-Markup:

Weisen Sie jedem Bild mithilfe des „id“-Attributs eine eindeutige Kennung zu:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

JavaScript-Funktion:

Erstellen Sie ein JavaScript Funktion zur Handhabung des Bildaustauschs beim Klicken:

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

Ereignisbehandlung:

Fügen Sie jedem Bild einen „onclick“-Ereignis-Listener hinzu und übergeben Sie die entsprechende Bild-ID:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

Funktionalität:

Wenn Sie auf ein klicken Bild wird die Funktion swapImage() aufgerufen, die die aktuelle Dateierweiterung des Bildes überprüft. Wenn es „.jpg“ ist, ersetzt die Funktion es durch „.png“, wodurch das Bild effektiv geändert wird. Wenn es sich um „.png“ handelt, kehrt die Funktion den Vorgang um und ändert es wieder in „.jpg“.

Dieser Ansatz nutzt HTML und JavaScript, um Bilder mit einem einzigen Klick zu ändern, ohne dass zusätzliche CSS-Klassen oder Pseudo-Klassen erforderlich sind Selektoren, die eine einfache und effiziente Lösung für Ihre Anfrage bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder ohne kompliziertes JavaScript einfach per Klick austauschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn