これで数時間苦労しています。イメージマップがあり、jQuery Maphilight プラグインを使用してイメージマップのさまざまな領域を強調表示しています。
プラグインは正常に動作していますが、アクティブな領域のハイライトを解除する方法が見つかりませんでした。キャンバスをクリアしてみました。
マークアップ:
<img src="someImage" usemap="#levelMap" id="floorplan" />
<map name="levelMap">
<area id="area1" shape="poly" coords="316,56,334,56">
<area id="area2" shape="poly" coords="460,84,537,85">
</map>
コード:
$('area').eq(0).attr('data-maphilight','{"fillColor":"000000","alwaysOn":true}'
$('#floorplate').maphilight();
これにより、期待どおりに最初の領域が強調表示されます。今、私は 2 番目の領域がアクティブな領域であり、最初の領域ではないことを伝えるカスタム イベントをリッスンしています。この時点で、
$('area').removeAttr('data-maphilight'); // Remove the attribute from all area elements.
$('area').eq(1).attr('data-maphilight','{"fillColor":"000000","alwaysOn":true}' // Add attribute for the next area.
$('#floorplate').maphilight(); // Call the plugin again to execute on the latest active area.
上記を実行すると、新しい領域が強調表示されますが、maphilight 属性がなくても古い領域は削除されません。「マップ」要素全体を削除して再度追加しようとしましたが、プラグインは状態を保存しているようです。
したがって、必要な最終出力は、スライドショーと同様に機能するイメージ マップです。1 つの領域が強調表示され、次の領域に移動します。
何か案は?