Question

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

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

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

<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>

Answer 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。

Answer 2

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

使用Jquery maphilight插件更改单击区域的fillColor

2 个答案: