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

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文件并更改填充颜色为任何颜色的代码你喜欢的。 希望这工作！