如何在用户点击时切换img？

Question

我正在使用wordpress。我已将我制作的图像转换为按钮，当用户点击它时，我希望图像更改为相同尺寸但颜色不同的另一图像。有没有人有一个简单的方法呢？

我可以在＆＃34;文本字段中执行所有操作＆＃34;我的页面构建器也...或者我需要在CSS编辑器中的后台有一些代码。

谢谢:)。

Answer 1

function changeImg() {
   Document.getElementById("test").src = "/newSource.png";
 }
 <img id="test" src="/source.png" onClick="changeImg()"></img>

Answer 2

Seth的答案非常有效，无需Jquery即可使用。但是因为你将Jquery列为标签，这里是Jquery的一个函数。

Function changeImg() {
    $("#test").attr("src","newImagePath.jpg");
}

现在，在img元素上，您需要添加一个调用我们刚创建的函数的onlick事件。

<img id="test" src="/source.png" onClick="changeImg()"/>

Answer 3

只需更改IMG元素的“src”属性，浏览器就会更改图像。