通过onclick()函数更改图像-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

通过onclick()函数更改图像

P粉242535777 2023-08-18 08:53:28

[HTML讨论组]

850

我想在点击对象时将一张图片更换为另一张图片。代码按照以下顺序堆叠： <pre class="brush:php;toolbar:false;"><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></pre> 我希望的是，当我点击<code><li></code>时，将图片更换为彩色版本的图片，即另一张图片。现在，我知道我可以使用JQuery/JS来实现。但是我不想为了实现这么简单的功能而添加大量的JS代码。 有没有更简单的方法来实现？像伪选择器<code>.active</code>类这样的方法？ 我想不出来。

P粉242535777

全部回复(1)

P粉1116277872023-08-19 00:43:36 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事件链接