网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑？
大家好，请问下网页编辑中，怎么实现鼠标移动到某个区域，图片中自动弹出小图，如下面两幅画，我鼠标移动到箭头所指出，就出现了整个单反的小图片小图片是固定位置，不用随鼠标移动的...
大家好，请问下网页编辑中，怎么实现鼠标移动到某个区域，图片中自动弹出小图，如下面两幅画，我鼠标移动到箭头所指出，就出现了整个单反的小图片小图片是固定位置，不用随鼠标移动的。
我是程序小白，我在网上查了下，说可以在图片的那个位置添加透明热点，在改热点里插图那副小图。我手头上有Dreamweaver但是只会弄点击热点弹出超链接的设置。求大神指教 展开
我是程序小白，我在网上查了下，说可以在图片的那个位置添加透明热点，在改热点里插图那副小图。我手头上有Dreamweaver但是只会弄点击热点弹出超链接的设置。求大神指教 展开
5个回答
展开全部
使用纯CSS即可实现全部效果，代码也很简单。
原理：hover触发CSS临近选择器
所需工具：DW（用来给图片画热区），PS（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片热区hover效果</title>
<style>
.main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} /* 宽度与高度必须与背景大图一致 */
.bigImg {position: absolute; display: none; border: 1px solid #ccc;}
.img1 {top: 199px; left: 153px;}
.img2 {top: 369px; left: 552px;}
.img3 {top: 411px; left: 632px;}
.hotspot:hover + .bigImg {display: block;}
</style>
</head>
<body>
<div class="main-wrap">
<img src="bg.jpg" usemap="#Map">
<map name="Map">
<area class="hotspot" shape="rect" coords="152,117,232,190" href="#">
<img class="bigImg img1" src="cpu.png">
<area class="hotspot" shape="rect" coords="553,313,605,355" href="#">
<img class="bigImg img2" src="drive.png">
<area class="hotspot" shape="rect" coords="635,353,695,397" href="#">
<img class="bigImg img3" src="printer.png">
</map>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用纯css即可实现全部效果，代码也很简单。
原理：hover触发css临近选择器
所需工具：dw（用来给图片画热区），ps（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。
原理：hover触发css临近选择器
所需工具：dw（用来给图片画热区），ps（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我觉光css就完全可以写了
追问
请问具体需要用到什么代码？不懂CSS啊
追答
不懂就没办法了。。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要JavaScript的配合。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
为什么在IE浏览器里不好使？其他的浏览器都没问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
