jquery - 用于 jquery 操作的图像的自定义映射

Question

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

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

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

有人可以告诉我一些优雅的方法吗？我附上将详细说明问题的图像。

非常感谢

在此处输入图像描述

score 3 · Accepted Answer

我建议你这样做：

使用Inkscape创建图像映射。此工具将允许您直观地选择图像中您希望可点击的区域（或对其他事件做出反应，例如mouseover）。一旦你这样做了，它会生成带有坐标的标签，你只需要复制粘贴到你的 html 页面中。
下载maphilight jquery 插件，它将使您能够将click、mouseover、mouseout和其他事件绑定到您喜欢的某些区域并执行相应的操作。

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

score 1 · Accepted Answer

使用图像映射。它是 HTML标准的一部分。有许多免费的在线工具可以轻松创建图像地图，只需 Google 一下。我个人最喜欢的是这个。

然后您可以像往常一样将事件绑定到<area>标签。maphilight jQuery 插件为悬停状态添加了很好的触感。

进一步阅读：

score 0 · Accepted Answer

给你的气球图像一些通用类（让 balloonImg），现在使用 jquery 你可以像这样在你的 html 上点击事件。

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

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

然而，在 html 和 body 上添加事件并不是一个好主意。因此，如果您将任何事件添加到整个 html 中，则必须$('html').unbind('click',htmlClickFun); 在不需要时取消绑定。

3 回答 3