当鼠标移动到图像区域时,将图像更换为新的图像;当鼠标移出图像区域时,将当前图像恢复为原来的图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移动事件</title>
<script type="text/javascript">
function $ (id){return document.getElementById(id);}
function mouseOver(){$ ('b1').src = "pic0.jpg";}
function mouseOut(){$ ('b1').src = "pic1.jpg";}
</script>
</head>
<body>
<h4>鼠标事件</h4>
<hr color="blue" >
<p>
<img src="pic1.jpg" alt="鼠标移动事件" id="b1" width="200px" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</p>
</body>
</html>
页面效果图: