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

Question

我使用绝对定位将几张图片叠放在一起，这些图片部分透明，拥有html的 area 和 map 以便只有可见部分可以点击。在jQuery中，我已经将鼠标事件附加到了 area 标签上。

这对于单个图像效果良好：当鼠标进入被映射的图像部分时，mouseenter和mouseleave就会触发。

问题是它仅适用于顶部的那张图片。对于其他所有图片，它都不会触发事件，也不会产生CSS悬停效果，因为它们上面还有另一张图片。这尽管 area 未重叠并且 map 在图片前面。

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

- Mark

---

有没有重叠多个图像的特殊原因？为什么不将它们分开并在一个图层中显示？ - Madara's Ghost

请问您可以提出一个问题吗？ - Christoph

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

Answer 1

您可以在所有个别图像的顶部放置一张完全透明的图像，并将所有图像映射区域连接到该图像。它将作为捕获鼠标事件的元素，并且您仍然可以更改所有个别图像。

- lanzz

---

详细解释请参见SO Answer，其中还展示了与提问者建议的不同方法。 - arttronics

Answer 2

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

为什么不使用画布/可缩放矢量图形（SVG）来进行绘制呢？有很多库可以使这项任务变得简单。其中之一是 RaphaëlJS（查看此 示例）。该库的优点在于它允许鼠标交互。

您可能要考虑的另一个库是 EaselJS，但它不适用于不支持<canvas>的浏览器，因此不支持IE < 9。

- strah

---

这个 RaphaëlJS 示例 更接近于 OP 提供的链接示例。 - arttronics

Answer 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。

- Christoph

Answer 4

您还可以放置一个具有固定高度和宽度的透明div，该div将具有onclick()事件和绑定函数。类似于：

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

- Artem Kiselev