Question

我使用绝对定位将多个图像放在彼此的顶部。这些图片部分透明，并且有一个html area和map，只能使可见部分可点击。在jQuery中，我将鼠标事件附加到area标记。

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

问题是它只适用于顶部图像。对于所有其他人来说，它不会触发事件而不是CSS悬停工作，因为它上面还有另一个图像。尽管事实area s不重叠且map s位于图像前面。

以下是问题的演示：http://markv.nl/stack/imgmap2/

Answer 1

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

Answer 2

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

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

您可以考虑的另一个库是EaselJS，但它不支持<canvas>的浏览器，因此没有IE＆lt; 9支持。

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

Answer 4

你也可以使用具有固定高度和宽度的宫殿透明div，它具有带绑定功能的onclick（）事件。某事如：

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

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

4 个答案: