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

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

我是程序小白，我在网上查了下，说可以在图片的那个位置添加透明热点，在改热点里插图那副小图。我手头上有Dreamweaver但是只会弄点击热点弹出超链接的设置。求大神指教

举报该文章

相关建议 2015-02-22

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

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/sp28m7p7pq28qq2f4p.html

其他看法

第1个回答 2015-07-11

使用纯css即可实现全部效果，代码也很简单。
原理：hover触发css临近选择器
所需工具：dw（用来给图片画热区），ps（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。

第2个回答 2015-02-21

我觉光css就完全可以写了追问

请问具体需要用到什么代码？不懂CSS啊

追答

不懂就没办法了。。。。

第3个回答 2015-02-21

需要JavaScript的配合。。。

第4个回答 2017-09-24

为什么在IE浏览器里不好使？其他的浏览器都没问题

相似回答

大家正在搜