javascript - 用javascript改变图片

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
changing the img src with jquery

标题可能会让这听起来很简单，而且可能确实如此。但我，以我对 js 的了解非常少，我发现它令人难以置信的神经紧张......基本上我有一个表单中设置的图片(比如说 img1 img2 和 img3)，我希望用户能够单击图像并它会变成另一个，例如你点击img1，它就会变成img1a。等等，代码如下:

<form>
<p align="center">
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center">
<label for="interest1" id="label-interest1"><img src="/images/img1.jpg" width="781" height="800" /></label>
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label>
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image-->
</form>

当前有复选框，但是这些复选框将被隐藏，因此我需要在单击时更改图像以向用户表明它实际上已被选中，大家有什么想法吗？

Answer 1

在图像标签中添加 onclick 事件并添加 javascript 以更改图像源。

<script type="text/javascript">
function func()
{
    var img1= document.getElementById("img1");

    if(img1.name == "on")
    {
        img1.src = "/images/" + "img1a.jpg";
        img1.name = "off";
    }
    else
    {
        img1.src = "/images/" + "img1.jpg";
        img1.name = "on";
    }
}
</script>

<img src="/images/img1.jpg" width="781" height="800" onclick="func()" id="img1" name="on" />