10

我使用绝对定位将几张图像放在一起。这些图像是部分透明的，并且有一个 htmlarea并且map只使可见部分可点击。在 jQuery 中，我将鼠标事件附加到area标签上。

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

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

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

4

4 回答 4

9

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

于 2012-06-08T13:24:09.130 回答
4

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

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

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

于 2012-06-08T13:29:55.300 回答
4

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

  +-----------+-----------+
  |           |           |
  |   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

于 2012-06-08T13:35:36.067 回答
1

您还可以使用具有固定高度和宽度的透明 div，该 div 将具有带有绑定功能的 onclick() 事件。像：

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>
于 2012-06-10T15:53:11.683 回答