jquery操作的图像的自定义映射

Question

我在做一个网站。我正在使用一些jquery来执行不同的操作。

我的背景图像有一个中心气球。在背景图像的顶部，我放置了四个不同的图像。这些也是气球形状的。如果有人单击这些小气球，我会执行某些jquery操作。现在，我希望如果有人单击中心气球之外的背景图像，而不是小气球，我希望触发一个jquery脚本。

我被困在如何选择这个可点击的区域。我在互联网上搜索过的任何地方，他们都告诉我要做一个矩形的可点击区域。这不是我所要求的。我可以使用许多微矩形来实现我的目的，但这是非常粗糙的方法。

有没有人能告诉我一些优雅的方法。我附上的图像将详细说明这个问题。

非常感谢

​

​

Answer 1

我建议你这样做：

1. 使用Inkscape创建图像映射。这个工具可以让你在视觉上选择你想要点击的图像区域(或者对其他事件做出反应，比如鼠标悬停)。一旦你这样做了，它将生成带有坐标的标签，你只需要复制粘贴到你的html页面中。
2. Download maphilight jquery plugin可以让你将点击、鼠标悬停、鼠标移出和其他事件绑定到你喜欢的特定区域，并执行相应的操作。

一旦您将单击事件绑定到所有四个气球，它将正常工作。对于与单击气球以外的背景有关的其他部分，您可以将单击处理程序绑定到整个图像，一旦单击，您将检查event.target是否是气球。如果不是气球，则用户单击气球外部的背景。

Answer 2

使用Image Maps。它是HTML standard的一部分。有许多免费的在线工具可以轻松地创建图像地图，只需谷歌它。我个人最喜欢的是this。

然后，您可以像往常一样将事件绑定到<area>标记。maphilight jQuery plugin为悬停状态添加了一个不错的触感。

进一步阅读：

• The element on MDN
• HTML tutorial - Image maps

Answer 3

给你的气球图像一些公共的类(让balloonImg)，现在使用jquery你可以在你的html上有像这样的点击事件。

var htmlClickFun=function(e){
    if(!$(e.target).is('.balloonImg')){
   //your code
};

$('html').click(htmlClickFun);

但是，在html和body上添加事件并不是一个好主意。因此，如果你要向整个html添加任何事件，那么当你不需要它的时候，你必须通过$('html').unbind('click',htmlClickFun);来解除它的绑定。

在http://jsfiddle.net/tAhV2/上查看