1

シナリオ：

  • 複数の領域がマッピングされた画像。
  • ページ上のテキストのリスト

望ましい機能: リスト内のさまざまなテキストにマウスを合わせると、マップされた画像内の対応する領域が強調表示されます。

これを行うことができる優れたJavaScriptツールを知っている人はいますか?

マウスを画像自体の上に移動すると、画像のセクションを強調表示する jquery プラグイン ( map hilight ) が見つかりました。次のステップを探しています - 画像の外側のソースからハイライトをトリガーします。

4

3 に答える 3

2

あなたが言及したプラグインのソースコードを見ましたが、やりたいことを実行できるように拡張するのはかなり簡単なはずです。ここにいくつかのヒントがあります。

jquery.maphighlight.js の 127 ～ 136 行目:

mouseover = function(e) {
   var shape = shape_from_area(this);
   add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);
};

if(options.alwaysOn) {
   $(map).find('area[coords]').each(mouseover);
} else {
   $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
}

ここですべてのイベント マジックが発生します。マウスオーバー機能は、領域を強調表示するために使用されます。\

コードでは、次のようにして、強調表示する領域座標を見つけようとすることができます。

$(map).find('#id_of_the_area[coords]').each(moseover);

強調したいタグにid_of_the_area付けた ID はどこにあるでしょう。<area>

それを関数に入れると、必要な場所から呼び出すことができます。

編集：

コメントの質問に基づいて、さらにいくつかの指針があります。

領域をハイライト/ハイライト解除する関数は、次のようになります。

function highlight(e) {
   $(map).find('#id_of_the_area[coords]').each(moseover);
} 
function unHighlight(e) {
   clear_canvas($(canvas));
}

この例id_of_mapでid_of_canvasは、and は map 要素と canvas 要素の ID になります。

mouseoverまたはclear_canvas関数およびmapまたはcanvas変数のスコープが問題になる場合があります。このコードを配置する場所には注意が必要です。この機能を追加する前に、jquery プラグインについて少し調べておくことをお勧めします。

jquery では、任意の html 要素にイベントをアタッチできます。このような：

$('#id_of_element').mouseover(highlight); 
$('#id_of_element').mouseout(unHighlight);

id_of_element は、強調表示をトリガーする要素の ID になります。

お役に立てれば！

于 2009-12-09T15:46:53.073 に答える
2

これは非常にエレガントではありませんが、問題のエリア要素のマウスオーバー イベントを手動でトリガーできます。

<a href="..." onmouseover="$('#certain-area')
       .trigger('mouseover');">link text</a>

マウスアウトについても同じことが言えます。もちろん、これはonmousoverandを使用するよりも控えめに行う方がよいでしょうonmouseout。

于 2009-12-09T15:48:45.083 に答える
0

Highslide はまさにあなたが求めていたものではありませんが、一見の価値があります。

于 2009-12-09T15:33:38.247 に答える