jquery - 为 jquery 操作自定义图像映射

Question

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

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

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

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

非常感谢

Answer 1

我建议你这样做:

1. 使用 Inkscape 创建图像映射.此工具将允许您直观地选择您希望可点击的图像区域(或对其他事件使用react，例如 鼠标悬停)。执行此操作后，它将生成带有坐标的标签，您只需将这些坐标复制粘贴到您的 html 页面中即可。
2. 下载maphilight jquery plugin这将使您能够将点击、鼠标悬停、鼠标移开 和其他事件绑定(bind)到您喜欢的某些区域并相应地执行操作。

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