标题可能会让这听起来很容易,而且很可能。但是,凭借我对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>
目前有复选框,但是这些会被隐藏,所以我需要在点击时更改图像以向用户显示它实际上已被选中,任何想法的人?
答案 0 :(得分: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" />
答案 1 :(得分: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"
)