移动鼠标替换图片

最新推荐文章于 2024-10-12 13:47:10 发布

原创最新推荐文章于 2024-10-12 13:47:10 发布 · 970 阅读

0 ·

CC 4.0 BY-SA版权

阿哈哈哈大前端专栏收录该内容

66 篇文章

订阅专栏

当鼠标移动到图像区域时，将图像更换为新的图像；当鼠标移出图像区域时，将当前图像恢复为原来的图片。

<!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>

页面效果图：