本例会动态地改变 HTML <image> 的来源 (src):The Light bulb,点击灯泡图片就可以打开或关闭这盏灯。
<html>
<body><script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" οnclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>
在上面代码中,为img增加点击事件onclick(),当点击图片时,就会触发onclick()方法。然后在方法中通过getElementById('myimage') 找到元素,再通过match()判断图片路径,进行选择设置。
效果如下 :