点击图片,则灯泡点亮。代码其实很简单,就是通过点击事件,切换图片URL源。
1.函数changeImage()被注册到<img标签的点击事件中,点击图片则调用此函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>
function changeImage()
{element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508686706121&di=978f369aad7ee3005239a5cbe761f6cb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fe824b899a9014c08dbf74283007b02087af4f4cc.jpg";}
}
</script>
<img id="myimage" οnclick="changeImage()"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509281363&di=7223b11b93d963f1b7c5da410b44f994&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F0823dd54564e92585387abcb9682d158ccbf4e67.jpg" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>