JavaScript|鼠标触碰图片切换(海绵宝宝图测试源码)

本博文源于js基础,旨在为测试DOM中的监听事件。

题目再现

鼠标碰到图片就换图,鼠标离开图片,恢复原图

解题思路

添加两个监听事件分别是鼠标放上去onmouseover和鼠标离开onmouseout,利用img路径换图。

实验效果

JavaScript|鼠标触碰图片切换(海绵宝宝图测试源码)_第1张图片
JavaScript|鼠标触碰图片切换(海绵宝宝图测试源码)_第2张图片

测试用图

大家点击图片另存为即可都是jpg格式,海绵宝宝叫做pic_a.jpg,派大星叫做pic_b.jpg
JavaScript|鼠标触碰图片切换(海绵宝宝图测试源码)_第3张图片
JavaScript|鼠标触碰图片切换(海绵宝宝图测试源码)_第4张图片

附上代码

代码中img路径千万要注意,学过html的都应该理解,如果这点不明白,
JavaScript|鼠标触碰图片切换(海绵宝宝图测试源码)_第5张图片
博主E盘js_root,html文件在第八章里,numbers文件夹下放有实验的两张图片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="pic_a.jpg" id="pic"/>
		<script type="text/javascript">
			var oPic = document.getElementById("pic");
			oPic.onmouseover = function() {
				this.src = "../numbers/pic_b.jpg";	
			}
			oPic.onmouseout = function() {
				this.src = "../numbers/pic_a.jpg";	
			}
		</script>
	</body>
</html>

你可能感兴趣的:(JS基础)