当图像被点击时,我必须更改图像源。问题是图像仅在函数执行期间更改,但在执行后立即恢复到其初始值!!
这是我到目前为止所做的:
<head>
<title></title>
<script type="text/javascript">
function cardMouseClick(obj) {
el = document.getElementById(obj);
el.src = "image2.jpg";
alert("Hello!");
}
</script>
</head>
<body>
<form id="form1">
<input type="image" id="b1" src="image1.jpg"
onclick="cardMouseClick('b1')"/>
</form>
</body>
image2适时显示,同时弹出警告窗口等待用户点击OK。然后它恢复到image1!
为什么?
你必须防止页面重新加载:
<form id="form1">
<input type="image" id="b1" src="image1.jpg"
onclick="cardMouseClick('b1'); return false;"/>
</form>
因为它在提交表单。return
false
from cardMouseClick(...)
你可以这样做。
<head>
<title></title>
<script type="text/javascript">
function cardMouseClick(obj) {
el = document.getElementById(obj);
el.src = "image2.jpg";
alert("Hello!");
return false;
}
</script>
</head>
<body>
<form id="form1">
<input type="image" id="b1" src="image1.jpg"
onclick="cardMouseClick('b1')"/>
</form>