如何单击以使用 jQuery maphilight 更改突出显示颜色

Posted 2023-05-09

【中文标题】如何单击以使用 jQuery maphilight 更改突出显示颜色

【英文标题】：How to click to change highlight colour with jQuery maphilight

【发布时间】：2021-12-20 12:07:30

【问题描述】：

我为一个侦察营地编写了一个在线预订系统。我正在尝试创建一个交互式站点地图，希望预订的人只需点击他们希望露营的球场即可。

到目前为止，我已经获得了从我的 SQL 数据库中提取坐标的图像地图，并根据该日期范围内是否已经预订了球场为区域着色。

https://www.drumhill.org.uk/test-map.asp?startDate=2021-11-05&endDate=2021-11-08

我正在努力解决的是，对于绿色（=可用）球场，我希望它们在单击（=选中）时变为黄色或其他东西，然后再次单击（=取消选中）再次变回绿色)。

我已经看到文档中有一个完全符合我要求的示例： https://projects.davidlynch.org/maphilight/docs/demo_features.html “星”准确地显示了我想要的行为......但我认为我缺乏 javascript（或 jQuery）知识让我有点退缩。

【参考方案1】：

您已经非常接近收到预期的结果了。

在当前页面上为该元素初始化插件时将选项传递给方法。

<script>
$("img.map").maphilight( 
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    fade: true,
    alwaysOn: false,
    neverOn: false,
    groupBy: false,
    wrapClass: true,
    shadow: false,
    shadowX: 0,
    shadowY: 0,
    shadowRadius: 6,
    shadowColor: '000000',
    shadowOpacity: 0.8,
    shadowPosition: 'outside',
    shadowFrom: false
 );
</script>

这会为当前页面上的所有 img 元素初始化 maphilight 插件，并带有一个类“map”。 记得根据自己的喜好调整颜色:-)

刚刚在您的网站上尝试过，通过在开发者控制台中运行：

$("img.map").maphighlight();

在选择元素时，您的所有自定义颜色似乎都在起作用。

【讨论】：

你好 Rasmus-E，感谢您的回复...我会在星期五下班时再看一下。