0

米国地図のカスタム バージョンでDavid Lynch の素晴らしい MapHighlight プラグインを使用しています。残念ながら、米国の一部の州 (ロードアイランド州など) は非常に小さいものです。このため、マップの右側に、これらの小さな州の略語を示すボックスを作成しました。

私ができるようにしたいのは、ユーザーがボックスまたは州のいずれかにカーソルを合わせたときに、ボックスとマップの両方を同時に強調表示することです。

<area href="#" title="RI" shape="poly" coords="617,141, 617,138, 617,135, 616,131, 620,130, 621,131, 623,133, 625,136, 623,138, 622,137, 622,139, 620,140, 617,141, 617,141"/>
<area href="#" title="RI" shape="rect" coords="728,164,760,182"/>

両方のアイテムは同じ時間のタイトルを共有しています。(例えば、ロードアイランドのタイトルタグは「RI」です)

David Lynch のサイトのサンプルに基づいて、次のようなことをすると便利かもしれないと思いました。

$('area[title]').mouseover(function() {
   $(this).mouseover();     
});

残念ながら、これは機能せず、さまざまなバリエーションを試してみましたが、イベントが発生したようには見えませんでした。

これらの要素を (一般的な方法で) 同期し、同じタイトルのすべてのエリア タグをマウスオーバー/ホバー時にすべてハイライト表示するにはどうすればよいですか?

4

3 に答える 3

5

ImageMapsterを試してみてください：http ：//www.outsharked.com/imagemapster

デフォルトの動作はあなたが望むことをするはずです（デモページを見てください-最初の例はUSAマップです）。

フィドルで：http：//jsfiddle.net/juvyh/

于 2012-06-07T17:55:29.457 に答える
3

これは古い質問であることは承知していますが、この SO の質問
で説明されているように 、 maphilight 関数には groupBy 関数があります。あなたの場合、次のようなことができます：

$('.mapimage').maphilight({ groupBy: 'title' });

エリアのタイトルでグループ化されます (ただし、エリアの任意の属性を選択できます)。

于 2013-10-30T10:24:30.233 に答える
1

試す ：

$('area').mouseover(function() {
    $('area[title="'+$(this).attr('title')+'"]').mouseover();
});

これは、mouseoverすべてのarea要素でイベントを処理し、title 属性を使用しmouseoverて、同じタイトルの一致するすべての領域でイベントをトリガーします。

于 2012-05-29T11:57:24.393 に答える