1

ImageMapster.jsを使用したホバー効果のある画像マップがあります...画像の横には、画像マップ領域の特定の領域を参照するテキストリンクのリストがあります。テキストリンクにカーソルを合わせると、画像マップ領域を強調表示できますか？

例えば：

<img src="map.png" usemap="#ch" style="width:100%;">
<map id="usa_image_map" name="usa>
<area href="http://ab.com" state="ab" shape="poly" coords="259,256,275,257,..."><area href="http://xy.com" state="xy" shape="poly" coords="332,421,329,416,...">
</map>
<div id="links">
<a href="http://ab.com">ab</a><a href="http://xy.com">xy</a>
4

1 に答える 1

1

これを試して：

    $("a", "#links").hover(
      function () {
        var state = $( this ).text();
        $( 'area[state="' + state +'"]').mapster('select');

    });

これは、。を使用してリンクリストにカーソルを合わせるとアクティブになるイベントですid="links"。var stateは、ホバーされたリンクのテキストを保持するため、ホバーする<a href="ab.com">ab</a>と、stateは。になりabます。セレクター$('area[state="' + state +'"]')を使用すると、ホバーされたリンクのテキストと等しいstate属性を持つマップのarea要素を見つけることができます。mapster('select')最後に、マップ領域を強調表示します。

于 2013-03-28T08:55:33.963 に答える