使用javascript或jQuery使图像映射可选择

Make image map selectable with javascript or jQuery?

本文关键字:图像 映射 可选择 jQuery javascript 使用      更新时间:2023-09-26

我需要使圆形剧场中座位的图像映射可选,就像一个复选框,有3个状态:选中,未选中和禁用。我想知道是否有办法做到这一点,使选定的图像将成为数据库提交序列化?

我让它只与复选框一起工作,但我不能将它们用于客户端(他们喜欢漂亮的东西:p)

查看我的jquery插件ImageMapster。它确实做到了这一点:允许您识别图像映射中应该突出显示并可以保持状态的区域。渲染高亮有很多选项,包括使用第二张图像作为高亮区域的源,以及识别应该忽略或固定在某种状态下的区域。在美国地图示例中,链接:

  • 华盛顿州被永久选中&不回应鼠标悬停事件
  • 俄勒冈被永久取消选中&没有回应鼠标悬停事件(这就好像它不是地图的一部分一样)但选项可以随时更改,所以可能有理由这样做在地图中包含区域,但将它们关闭)。
  • 阿拉斯加是不可选择的(但不响应鼠标悬停事件)

您还可以分配选项,以确定每个区域的高亮显示方式。

完整的文档在github.

如果您使用"alternate image"选项来突出显示,则只需要一个备用图像,插件将从第二张图像的相同区域绘制内容以创建每个突出显示。

它可以使用任何HTML图像映射作为数据源

为什么不直接使用jquery UI按钮呢?

http://jqueryui.com/demos/button/图标

这可能会有帮助,你不需要重新编码任何东西