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

How to make absolute positioned image area maps clickable with mouse?

本文关键字：鼠标 地图 区域 何使绝 定位 图像      更新时间：2023-09-26

我使用绝对定位将几个图像放置在彼此之上。这些图像是部分透明的，并具有 html area和map，仅使可见部分可单击。在jQuery中，我将鼠标事件附加到area标签上。

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

问题是它仅适用于顶部图像。对于所有其他的，它不会触发事件，CSS悬停不起作用，因为它上面还有另一个图像。尽管事实上area s不重叠并且map在图像前面。

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

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

这不是

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

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

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

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

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

您还可以宫殿具有固定高度和宽度的透明div，该div 将具有带有绑定函数的 onclick（） 事件。 像这样的一些东西：

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