javascript - 单击带有交互式 map /区域的图像

Question

我有一个透明的 PNG，想要使用 map 和 area 元素捕获点击。因为我需要透明部分下方的区域也可单击，所以我执行了以下操作:

img{
  position: relative;
  pointer-events: none;
}
map, area{
  pointer-events: auto;
}

但是，这使得浏览器也会忽略关联 map 上的指针事件。我该如何解决这个问题？

https://codepen.io/kslstn/full/jYZVmV

请注意，在 Codepen 中，图像不是透明的，但我注意到与透明图像没有区别。

背景:我正在制作一个 3D 平面图，其中地板形状为非矩形。 Here's an example矩形地板的设置。

Answer 1

也许我没有看到全貌，因为您的代码片段与您的示例不同，但是，您是否尝试过:而不是使用 map 标记:

• 使用图像上的点击事件；

• 向图像添加“a”标签包装并在其上使用点击事件；

• 在事件中添加一个空的“a”标签并对其进行样式设置:

  显示: block ； position:absolute； 宽度:100%； 高度:100%； 顶部:0； 左:0； z 索引:1；

  *你的“楼层”应该与此相关