如何使绝对定位的图像区域地图可以用鼠标点击？

Posted 2023-05-08

【中文标题】如何使绝对定位的图像区域地图可以用鼠标点击？

【英文标题】：How to make absolute positioned image area maps clickable with mouse?

【发布时间】：2012-06-02 17:02:51

【问题描述】：

我有几张图像使用绝对定位相互重叠。这些图像是部分透明的，并且有一个 html area 和 map 以使只有可见部分可点击。在 jQuery 中，我已将鼠标事件附加到 area 标签。

这适用于一个图像：mouseenter 和 mouseleave 仅在输入图像的映射部分时触发。

问题是它只适用于顶部图像。对于所有其他人，它不会触发事件，CSS 悬停也不会起作用，因为它上面还有另一个图像。尽管areas 不重叠并且maps 位于图像前面，但还是会这样。

这里是问题的演示：http://markv.nl/stack/imgmap2/

【问题讨论】：

重叠多张图片有什么特殊原因吗？为什么不分开并在一层中显示？

你能问个问题吗？

我添加了一个问题。无法使用一张图片，因为我想在悬停时更改单个图片。

【参考方案1】：

您可以在所有单独的图像之上放置一个完全透明的图像，并将所有图像映射区域附加到该图像。它将充当鼠标事件的捕获元素，您仍然可以更改所有单个图像。

【讨论】：

可以在SO Answer 看到详细的解释，这也显示了SO Question 海报建议的未使用的不同方法。

【参考方案2】：

这不是直接的答案/解决方案...

为什么不使用画布/SVG 进行绘图？有很多库可以使任务变得容易。其中之一是RaphaëlJS（查看此example）。这个库的优点是它允许鼠标交互。

你可以考虑的另一个库是EaselJS，但它在不支持<canvas>的浏览器中不起作用，因此不支持IE

【讨论】：

这个 RaphaëlJS Example 更接近于 OP 的链接示例。

【参考方案3】：

仅当图像不重叠时才有效（见图）。在您的情况下，所有图像都具有完全相同的大小并且彼此堆叠。由于浏览器将图像视为实体对象（它们不关心透明度），因此无法确定您现在要悬停哪个图像？

  +-----------+-----------+
  |           |           |
  |   img1    |   img2    |
  |           |           |
  |           |           |
  +-----------+-----------+
  |           |           |
  |   img3    |   img4    |
  |           |           |
  |           |           |
  +-----------+-----------+

但是，您可以解决此问题：

只需在一张包含所有区域的图像上使用单个图像映射，并使用一点 javascript 即可触发所有其他图像的悬停效果。

$("area").hover(function()
    var $target = $("#"+$(this).data("target")); // getting the target image
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image
,function()
    var $target = $("#"+$(this).data("target"));
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes
);​

基于您的代码的工作示例：jsFiddle-Demo

【参考方案4】：

您还可以使用具有固定高度和宽度的透明 div 将具有绑定函数的 onclick() 事件。类似的东西：

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>