js焦点多张图片如何在html中只看到一张图片

 我来答

1个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

小卡卡张
推荐于2016-04-27 · 超过13用户采纳过TA的回答

知道答主

回答量：63

采纳率：0%

帮助的人：23.2万

我也去答题访问个人页

关注

展开全部

可以利用层来实现。
<html>
<head>
<title>图片的显示</title>
<style type="text/css">
<!--
#bg1 {
	position:absolute;
	width:162px;
	height:115px;
	z-index:1;
}
#bg2 {
	position:absolute;
	width:162px;
	height:115px;
	z-index:1;
	left: 1px;
	top: 1px;
	display:none;
}
#b1 {
	position:absolute;
	width:22px;
	height:21px;
	z-index:2;
	left: 60px;
	top: 201px;
}
#b2 {
	position:absolute;
	width:22px;
	height:24px;
	z-index:3;
	left: 84px;
	top: 203px;
}
-->
</style>
<script>
	function showbg1(){
		document.getElementById("bg1").style.display="block";
		document.getElementById("bg2").style.display="none";
		
	}
	function showbg2(){
		document.getElementById("bg1").style.display="block";
		document.getElementById("bg2").style.display="block";
	}
</script>
</head>

<body>
<div id="bg1"><img src="mao.jpg" width="160" height="180" />
  <div id="bg2"><img src="haitun.jpg" width="160" height="180" /></div>
</div>

<p> </p>
<div id="b1" onmousemove="showbg1()"><img src="b1.png" width="22" height="20" /></div>
<div id="b2" onmousemove="showbg2()"><img src="b2.png" width="18" height="19" /></div>
</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js焦点多张图片如何在html中只看到一张图片

其他类似问题

为你推荐：