使用 Jquery maphilight 插件更改单击区域的填充颜色答案

【问题标题】：changing fillColor of an area on click using Jquery maphilight plugin使用 Jquery maphilight 插件更改单击区域的填充颜色
【发布时间】：2012-03-21 11:10:10
【问题描述】：

我正在使用 JQuery maphilight 插件来突出显示世界地图中的区域。现在我已经为区域元素设置了以下默认选项

fillColor: 'F25607' //orange color
alwaysOn:  'true'

因此在页面加载时，区域元素会以橙色着色。我对每个区域元素都有一个 onclick 事件。我需要将地图中单击区域元素的突出显示颜色（即填充颜色）更改为不同的颜色，如绿色当我单击地图中的另一个元素时，该元素应变为绿色，而前一个选定的元素应变回橙色。这是我的地图的示例代码

<img id="theImg" class="map" src="/gra/images/worldblank.png" usemap="#worldmap" />
<map id="worldmap" name="worldmap">
      <area class='area' shape="circle" alt="Israel" title="Israel" coords="423,232,7" href="#" onclick="loadActivity('Israel');" />
      <area class='area' shape="circle" alt="China" title="China" coords="548,229,5" href="#" onclick="loadActivity('China');"  />
</map>

要完成的示例 js 函数将是：

<script>
jQuery(document).ready(function(){
        jQuery('.map').maphilight();
    });

$(function() {
  $('.area').click(function(e) {
e.preventDefault(); // from the samples, i guess used to overrride default options
// get the clicked area element and set its fillColor to green 
// make the previous selected area fillColor to the default options value  (if we need to do this)
// use the trigger function to trigger this change
    });
 });
</script>

【问题讨论】：

标签： jquery map highlight

【解决方案1】：

希望对您有所帮助：

<script>
$(function() {
  $('.area').click(function(e) {
    e.preventDefault();
    var data = $(this).data(maphilight) || {};
    data.fillColor = 'FF0000'; // Sample color

    // This sets the new data, and finally checks for areas with alwaysOn set
    $(this).data('maphilight', data).trigger(alwaysOn.maphilight);
  });
});
</script>

来源：Example from the official documentation。

【讨论】：

当我更改为 .trigger('alwaysOn.maphilight') 并在参数周围加上撇号时，这对我有用。

【解决方案2】：

很简单，去这个链接 http://davidlynch.org/projects/maphilight/docs/ 然后打开您的 jquery.maphilight.min.js 文件并将填充颜色更改为您喜欢的任何颜色代码。希望这有效！

【讨论】：