网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑?

大家好,请问下网页编辑中,怎么实现鼠标移动到某个区域,图片中自动弹出小图,如下面两幅画,我鼠标移动到箭头所指出,就出现了整个单反的小图片小图片是固定位置,不用随鼠标移动的... 大家好,请问下网页编辑中,怎么实现鼠标移动到某个区域,图片中自动弹出小图,如下面两幅画,我鼠标移动到箭头所指出,就出现了整个单反的小图片小图片是固定位置,不用随鼠标移动的。

我是程序小白,我在网上查了下,说可以在图片的那个位置添加透明热点,在改热点里插图那副小图。我手头上有Dreamweaver但是只会弄点击热点弹出超链接的设置。求大神指教
展开
 我来答
ml4w5
2015-02-22 · TA获得超过1394个赞
知道小有建树答主
回答量:625
采纳率:25%
帮助的人:646万
展开全部

使用纯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>


山水阿锐
2015-07-11 · TA获得超过34.3万个赞
知道顶级答主
回答量:23.7万
采纳率:91%
帮助的人:3.2亿
展开全部
使用纯css即可实现全部效果,代码也很简单。
原理:hover触发css临近选择器
所需工具:dw(用来给图片画热区),ps(算出弹出层的top和left偏移值)
我在Demo里画了三个热区(位置如下图),你用鼠标悬停到上面即可看到效果。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
内的权势
2015-02-21 · TA获得超过349个赞
知道小有建树答主
回答量:367
采纳率:50%
帮助的人:272万
展开全部
我觉光css就完全可以写了
追问
请问具体需要用到什么代码?不懂CSS啊
追答
不懂就没办法了。。。。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
183525594
2015-02-21 · TA获得超过2922个赞
知道大有可为答主
回答量:3664
采纳率:58%
帮助的人:2054万
展开全部
需要JavaScript的配合。。。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
puyw1973
2017-09-24
知道答主
回答量:5
采纳率:0%
帮助的人:5532
展开全部
为什么在IE浏览器里不好使?其他的浏览器都没问题
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式