Change image via onclick() function

Question

I want to change one image to another when clicking on the object. Codes are stacked in the following order:

<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>

What I want is that when I click

, the image changes to a color version of the image, which is another image. Now, I know I can do it using JQuery/JS. But I don't want to add a lot of JS code to achieve such a simple function.

Is there an easier way to do this? Methods like the pseudo-selector.active class?

I can't think of it.

Answer 1

To change the onclick event of an image using JavaScript, you need to have an image with an id:

<p>
    <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>

Then, when the image is clicked, you can call the JavaScript function:

function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
    } else {
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
    }
}

This code will set the image to maximize.png when the current img.src is set to minimize.png and vice versa. For more details, please visit: Changing the onclick event link of an image using JavaScript