我正在制作一个网站。我正在使用一些 jquery 来执行不同的操作。
我的背景图像有一个中心气球。在背景图片之上,我放置了四张不同的图片。这些也是气球形状的。如果有人点击这些小气球,我会执行某些 jquery 操作。现在我想要如果有人点击中央气球之外的背景图像而不是小气球,我想触发一个 jquery 脚本。
我对如何选择这个可点击区域感到困惑。在我搜索过的互联网上到处都是,他们告诉我要制作一个矩形的可点击区域。这不是我需要的。我可以使用许多微型矩形来实现我的目的,但这是一种非常粗糙的方法。
有人可以告诉我一些优雅的方法吗?我附上了详细说明问题的图片。
非常感谢
最佳答案
我建议你这样做:
- 使用 Inkscape 创建图像映射.此工具将允许您直观地选择您希望可点击的图像区域(或对其他事件使用react,例如 鼠标悬停)。执行此操作后,它将生成带有坐标的标签,您只需将这些坐标复制粘贴到您的 html 页面中即可。
- 下载maphilight jquery plugin这将使您能够将点击、鼠标悬停、鼠标移开 和其他事件绑定(bind)到您喜欢的某些区域并相应地执行操作。
将点击事件绑定(bind)到所有四个气球后,它将正常工作。对于单击气球以外的背景的另一部分,您可以将click 处理程序绑定(bind)到整个图像,一旦单击,您检查event.target 是否为气球。如果不是气球,则用户点击了气球外的背景。
关于jquery - 为 jquery 操作自定义图像映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14102172/