0

これで数時間苦労しています。イメージマップがあり、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 つの領域が強調表示され、次の領域に移動します。

何か案は？

4

2 に答える 2

0

私も同じ問題に苦しんでいました。私がしたことは、画像とマップ要素を別々の div にラップしてから、maphilight を適用して問題を解決したことです。

<div id='image'> <image src='yourimage' class='mapclass' usemap='#mymap'></div>

そして、あなたの<map>タグは次のとおりです

<div id='map'> <map name='mymap'> <area></area> </map> </div>

それを適用$('.mapclass').maphilight() すると、魔法のように機能します

于 2015-03-07T06:09:11.307 に答える
0

これがあなたが探しているものだと思います。たとえば、「ハイライトを解除」したい場合は、次のようにarea1します。

$('area#area1').unbind('.maphilight');

これは、mahilight のサンプル ページで試したものと似ています: http://davidlynch.org/projects/maphilight/docs/demo_simple.html。そこに着いたら、コンソールで次を実行してみてください。

$('area:eq(1)').unbind('.maphilight');
于 2013-02-28T04:44:32.000 に答える