通过onclick()函数更改图像

Question

我想在点击对象时将一张图片更换为另一张图片。代码按照以下顺序堆叠：

<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>

我希望的是，当我点击

时，将图片更换为彩色版本的图片，即另一张图片。现在，我知道我可以使用JQuery/JS来实现。但是我不想为了实现这么简单的功能而添加大量的JS代码。

有没有更简单的方法来实现？像伪选择器.active类这样的方法？

我想不出来。

Answer 1

要使用JavaScript更改图像的onclick事件，您需要具有具有id的图像：

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

然后，当单击图像时，您可以调用JavaScript函数：

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

此代码将在当前img.src设置为minimize.png时将图像设置为maximize.png，反之亦然。 有关更多详细信息，请访问： 使用JavaScript更改图像的onclick事件链接