Question

我有一个页面覆盖div，其background-image。背景图像以屏幕为中心，并且在点击时有一个模拟按钮“关闭”（图像本身），这将删除叠加层。我想检测用户是否仅单击该图像中的模拟按钮区域。为了更好地理解，让我们说按钮区域从顶部45％到图像边缘左边45％。

目前我在图片上的任意位置点击了删除叠加效果。我只想将点击限制在按钮区域。任何想法都受到高度赞赏。

Answer 1

使用html 5，您可以在图像上创建用户可以点击的地图并对其执行操作，查看http://www.w3schools.com/tags/tag_map.asp

Answer 2

使用像

这样的图像映射

<img src="myImg.gif" width="100" height="100" alt="MyImageWithBtn" usemap="#imgmapExample">

<map name="imgmapExample">
  <area shape="rect" coords="0,0,50,80" alt="Sun" href="sun.htm">
</map>

Reference

PS：根据按钮的位置

给出coords值

Image-Maps.com帮助您找到图片的坐标

检测是否单击了div的背景图像的一部分

2 个答案: