移动鼠标替换图片

最新推荐文章于 2024-06-22 00:42:24 发布

莫亓

最新推荐文章于 2024-06-22 00:42:24 发布

阅读量888

点赞数

分类专栏：阿哈哈哈大前端

本文链接：https://blog.csdn.net/Bule_daze/article/details/79586934

版权

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

66 篇文章 1 订阅

订阅专栏

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

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

页面效果图：

莫亓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动鼠标替换图片

当鼠标移动到图像区域时，将图像更换为新的图像；当鼠标移出图像区域时，将当前图像恢复为原来的图片。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>鼠标移动事件</title> <script type="text/javascript...
复制链接

扫一扫

专栏目录