Question

我想在用户悬停在图像的特定部分上时触发事件处理程序，例如图像的中心或图像的右侧（区域将包括，例如，大约100个像素）。我没有使用任何框架，所以这是我正在使用的普通javascript。我不确定使用图像映射是否有效。有人可以帮忙吗？

Answer 1

Quirksmode about mouse position

鉴于这里涉及的疯狂，我会：

使用框架（我刚用Mootools做了类似的事情）
将绝对定位的div放在图像上并听取它们上的事件，而不是图像（最近这样做，左边50％和右边50％，比跟踪鼠标位置麻烦少。）

或者去吧，quirksmode提供了一个不错的功能来获取鼠标位置，然后你需要计算图像的位置，然后进行数学计算以获得鼠标在图像上的位置，做数学在图像的鼠标悬停事件中，然后不断检查位置是否符合您的标准，然后在它执行时执行某些操作：）

Answer 2

您可以使用MouseMove事件找出光标的位置，然后实现自己的逻辑来计算相对于图像的位置。

有关获取鼠标坐标的信息，请参阅this page。

Answer 3

我不知道你需要多少个区域，如果它们需要特别形状或类似的东西......

一个简单的解决方案是将（CSS）空div元素“放置”在将触发事件的图像上

afaik无法使用图像地图触发js事件

Answer 4

我建议在您要在图片中检查div的地方放置一个不可见的mouse_over。（如果您想要的区域当然是矩形）。然后在mouse_over上触发div。

如果您想检查非矩形区域（不能是div），我建议您在图像上放置一个相同大小的div。检查div上的鼠标位置，并使用它与遮罩图像进行比较。

实施例

MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;

if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.

通过了解遮罩图像上的颜色，您可以设置多个事件。

Answer 5

与jquery结合的图像映射是我以前使用的一个很好的解决方案。我看到你没有使用框架，但值得一看。

这是我用的图片地图和mouseenter / mouseleave事件的一小段代码片段。

$(".map-areas area")
.mouseenter(function() {
    idx = $(".map-areas area").index(this);
    showMapArea(idx);
})
.mouseleave(function() {
    $(".map-hovers img").hide();
    $(".map-titles img").hide();
});

触发图像特定部分的事件

5 个答案:

实施例