<!DOCTYPE html>`
<html>
<head>
<meta charset="utf-8">
<script>
function lightOn(){
document.getElementById("con").src="http://image108.360doc.com/DownloadImg/2017/07/3109/107140758_2.png";
}
function lightOff(){
document.getElementById("con").src="http://image108.360doc.com/DownloadImg/2017/07/3109/107140758_3.gif";
}
</script>
</head>
<body>
<h1>控制灯泡开关</h1>
<img src="http://image108.360doc.com/DownloadImg/2017/07/3109/107140758_2.png" id="con" onmouseover="lightOn()" onmouseout="lightOff()"
width="100px" height="180px">
</body>
</html>
这是src属性的问题，事件发生的时候函数是执行了的，不信在函数里面写个alert("hello")；
可以使用setAttribute属性来修改src的值
原图片显示不出，我换了两张图片试了下，没有问题。。。