1

可能重复：
使用 jquery 更改 img src

标题可能使这听起来很容易，而且可能确实如此。但是我，以我对 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>

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

4

2 回答 2

0

在图像标签中添加一个 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" />
于 2012-12-18T21:27:29.190 回答
0

您不一定需要使用另一个图像，您可以区分现有图像。

使用 CSS 类：

<head>
    <style>
        .selected {
            outline: solid 2px blue;
        }
    </style>
</head>
<body>
    <img class="selected" src="http://bugzilla.mozilla.org/extensions/BMO/web/images/mozchomp.gif" />
</body>

使用 javascript，将 className 更改为“selected”以获得突出显示效果或更改为“”（无，空）以取消选择。

（或使用内联 css 样式属性style="outline: solid 2px blue"）

于 2012-12-18T21:31:48.637 回答