2
JQuery maphilightプラグインを使用して、世界地図の領域を強調表示しています。現在、私はエリアエレメントに次のデフォルトオプションを設定しています。Jquery maphilightプラグインを使用してクリック時に領域のfillColorを変更する
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>
$(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このヘルプはあなた
<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>
これは、引数の前後にアポストロフィを付けて.trigger（ 'alwaysOn.maphilight'）に変更したときに役立ちました。 – burktelefon