需求:
1.有一个地图图片,上面有十几个红点,点击红点,响应事件,弹出一个div层
问题:弹出div层后,这个层覆盖点某些红点,导致点击不了,如何解决
上代码:
地图热点 <div class="weizhi_main"><img src="../images/weizhi_ditu.jpg" border="0" usemap="#Map" style="margin-left:8px; margin-top:8px;z-index:2; " />
<map name="Map" id="Map">
<area shape="rect" coords="417,462,493,499" href="javascript:showSiChuan('xujiahui')" />
<area shape="rect" coords="550,381,599,435" href="javascript:showSiChuan('huaihailu')" />
<area shape="rect" coords="676,364,739,403" href="javascript:showSiChuan('yuyuan')" />
<area shape="rect" coords="608,302,652,351" href="javascript:showSiChuan('nanjingdonglu')" />
<area shape="rect" coords="655,274,703,315" href="javascript:showSiChuan('waitan')" />
<area shape="rect" coords="735,295,785,346" href="javascript:showSiChuan('lujiazui')" />
<area shape="rect" coords="788,312,842,365" href="javascript:showSiChuan('babaiban')" />
<area shape="rect" coords="527,315,581,367" href="javascript:showSiChuan('nanjingxilu')" />
<area shape="rect" coords="463,320,509,368" href="javascript:showSiChuan('jinganshi')" />
<area shape="rect" coords="383,340,443,398" href="javascript:showSiChuan('zhongshan')" />
<area shape="rect" coords="307,368,370,411" href="javascript:showSiChuan('hongqiao')" />
<area shape="rect" coords="638,174,704,228" href="javascript:showSiChuan('sichuanbeilu')" />
<area shape="rect" coords="736,64,813,105" href="javascript:showSiChuan('wujiaochang')" />
<area shape="rect" coords="493,128,555,168" href="javascript:showSiChuan('daling')" />
</map>
</div>弹出层 <div class="weizhixinxi" id="nanjingxilu" style="display:none;">
<div class="xinxi_top" id="nanjingxilu_top">南京西路商圈(您现在所在的位置)</div>
<div class="xinxi_down_left" id="nanjingxilu_down_left"><a href="nanjingdonglu.html"><img src="../images/nanjingdonglu.jpg" width="145" height="107" border="0" /></a>
<div class="xinxi_down" id="nanjingxilu_down"><a href="nanjingxilu.html">南京西路商圈</a></div>
</div>
<div class="xinxi_down_right" id="nanjingxilu_down_right"> <a href="nanjingxilu.html">南京西路商圈位于静安区东南部横贯东西,地形特征好似一把开启致富之门的“金钥匙“,具有明显的区位优势.......
</a>
<div class="xinxi_down_right_down" id="nanjingxilu_down_right_down"><a href="nanjingxilu.html">更多</a></div>
</div>
<div class="donghua_nanjingxilu" id="nanjingxilu_donghua"></div>
</div>
1.有一个地图图片,上面有十几个红点,点击红点,响应事件,弹出一个div层
问题:弹出div层后,这个层覆盖点某些红点,导致点击不了,如何解决
上代码:
地图热点 <div class="weizhi_main"><img src="../images/weizhi_ditu.jpg" border="0" usemap="#Map" style="margin-left:8px; margin-top:8px;z-index:2; " />
<map name="Map" id="Map">
<area shape="rect" coords="417,462,493,499" href="javascript:showSiChuan('xujiahui')" />
<area shape="rect" coords="550,381,599,435" href="javascript:showSiChuan('huaihailu')" />
<area shape="rect" coords="676,364,739,403" href="javascript:showSiChuan('yuyuan')" />
<area shape="rect" coords="608,302,652,351" href="javascript:showSiChuan('nanjingdonglu')" />
<area shape="rect" coords="655,274,703,315" href="javascript:showSiChuan('waitan')" />
<area shape="rect" coords="735,295,785,346" href="javascript:showSiChuan('lujiazui')" />
<area shape="rect" coords="788,312,842,365" href="javascript:showSiChuan('babaiban')" />
<area shape="rect" coords="527,315,581,367" href="javascript:showSiChuan('nanjingxilu')" />
<area shape="rect" coords="463,320,509,368" href="javascript:showSiChuan('jinganshi')" />
<area shape="rect" coords="383,340,443,398" href="javascript:showSiChuan('zhongshan')" />
<area shape="rect" coords="307,368,370,411" href="javascript:showSiChuan('hongqiao')" />
<area shape="rect" coords="638,174,704,228" href="javascript:showSiChuan('sichuanbeilu')" />
<area shape="rect" coords="736,64,813,105" href="javascript:showSiChuan('wujiaochang')" />
<area shape="rect" coords="493,128,555,168" href="javascript:showSiChuan('daling')" />
</map>
</div>弹出层 <div class="weizhixinxi" id="nanjingxilu" style="display:none;">
<div class="xinxi_top" id="nanjingxilu_top">南京西路商圈(您现在所在的位置)</div>
<div class="xinxi_down_left" id="nanjingxilu_down_left"><a href="nanjingdonglu.html"><img src="../images/nanjingdonglu.jpg" width="145" height="107" border="0" /></a>
<div class="xinxi_down" id="nanjingxilu_down"><a href="nanjingxilu.html">南京西路商圈</a></div>
</div>
<div class="xinxi_down_right" id="nanjingxilu_down_right"> <a href="nanjingxilu.html">南京西路商圈位于静安区东南部横贯东西,地形特征好似一把开启致富之门的“金钥匙“,具有明显的区位优势.......
</a>
<div class="xinxi_down_right_down" id="nanjingxilu_down_right_down"><a href="nanjingxilu.html">更多</a></div>
</div>
<div class="donghua_nanjingxilu" id="nanjingxilu_donghua"></div>
</div>
解决方案 »
- 用过百度API的高手进,请教这个效果怎么做
- js读取二进制图片数组的问题
- 含有html标签的信息分页 应该如何解决??
- Function.prototype什么意思,Function指的是什么,不是很清楚
- javaScript 如何讀寫XML文件
- 动态改变onclick的值, 想写个JS涵数,先给onClick赋值,再去点击被赋值的HTML控件.为什么不行,请高人看.
- javascript高手帮忙看一个下拉列表的问题
- 关于window.close()的问题~~
- 求一完整的js只加密函数,变量的功能代码
- 有没有办法实现在web中通过一个连接打开windows的记事本(回答的立刻给分)
- js中如何获取字符串的后四位?
- 百度知道 有一个按钮时 “换一批” 用到什么技术啊!!!???
2。参照我上面说的鼠标划过自然显示的那种,即使是点击弹出,也可以设为在鼠标离开触发点范围时自动隐藏。
3。实在不想自动隐藏的话,监测鼠标位置,和各个点的坐标相比较,在一定很小的范围内,就认为到了该目标点,调整该点的z-index为最大,即在上层显示。但这个应在没办法时才考虑,因为你显示出来的内容,也许某个内容也是需要点击而又恰巧和某个挡住的点重合,这样的话,这二者你就只能操作一个而不能分别相应去操作了。
2.它是个触摸屏,给用户点击用的,鼠标离开出发点范围就自动隐藏,这种方法可能不行
除了设置z-index的方法外
还有别的方法吗
透过一个div,点击链接
通过设置弹出层的style: pointer-events:none 即可实现,但是它不支持IE
求解