题目默认是关灯图片,鼠标移动到图片上变成亮灯图片,鼠标离开变回关灯图片。在做成点击图片也可以切换图片
移动开关效果代码
<body>
<div align="center"><img src="cankao/bulb_off.png" width="300px" onmouseover="onbulb()" onmouseout="offbulb()"></div><br/>
</body>
<script>
function onbulb() {
var img=document.querySelector("img")
img.src="cankao/bulb_on.png"
}
function offbulb() {
var img=document.querySelector("img")
img.src="cankao/bulb_off.png"
}
</script>
点击图片开关效果
<div align="center">
<img src="cankao/bulb_off.png" width="300px" onclick="on()">
</div>
<script>
var i=1;
function on() {
if (i) {
var img = document.querySelector("img");
img.src = "cankao/bulb_on.png"
i=0;
}else {
var img = document.querySelector("img");
img.src = "cankao/bulb_off.png"
i=1;
}
}
function off() {
var img=document.querySelector("img");
img.src="cankao/bulb_off.png"
}
</script>