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

Altering Images on Click with Simplicity

Your query regarding image modification on click highlights the need for a straightforward solution without excessive JavaScript code. Here's an approach that leverages HTML and JavaScript to achieve your desired outcome.

HTML Markup:

Assign a unique identifier to each image using the "id" attribute:

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

JavaScript Function:

Create a JavaScript function to handle the image swap on click:

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

Event Handling:

Attach an "onclick" event listener to each image, passing the corresponding image's ID:

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

Functionality:

When you click on an image, the swapImage() function is invoked, which checks the image's current file extension. If it's ".jpg," the function replaces it with ".png," effectively changing the image. If it's ".png," the function reverses the process, changing it back to ".jpg."

This approach leverages HTML and JavaScript to modify images with a single click without the need for additional CSS classes or pseudo selectors, providing a simple and efficient solution to your query.

The above is the detailed content of How Can I Easily Swap Images on Click Without Complicated JavaScript?. For more information, please follow other related articles on the PHP Chinese website!