0

国ノルウェーの写真があります: https://autopower.no/images/geoLocation/NO-578.png ご覧
の とおり、画像は郡に分割されています。

ユーザーが左側の郡名にカーソルを合わせると、画像が 20 個の等しい画像に切り替わり、対応する郡が強調表示され、右側にいくつかの情報が表示されます: https://autopower.no/?Page=Dealers

私がやりたいことは、ユーザーがホバリングしている郡に基づいて画像自体にホバーしたときに、(右側のコンテンツに対して) まったく同じことが起こるようにすることです。

私はいくつかの CSS イメージ マップを調べましたが、私の場合はどのように使用できるかわかりませんでした...

何を調べる必要があるかについてのヒントを教えてくれる人がいますか? 開始する方法、またはこれまでにセットアップしたものでこれが不可能かどうかを教えてください-別のアプローチが必要/使用する必要がある場合は?

jQueryにはある程度慣れています。
フラッシュを使用しないことを望んでいました。

4

1 に答える 1

0

.mouseover() および mouseout() jQuery メソッドを使用して、これを実現できます。次に例を示します。

$(".county").mouseover(function() {
    var elementId = "#text-" + $(this).attr("id").split("-")[1];
    $(elementId).removeClass("hidden");
});

$(".county").mouseout(function() {
    var elementId = "#text-" + $(this).attr("id").split("-")[1];
    $(elementId).addClass("hidden");
});

これの使用方法を示す簡単なフィドルを作成しました: http://jsfiddle.net/X2u2y/

これに関する完全なドキュメントは、jQuery API サイト ( http://api.jquery.com/mouseover/ ) で入手できます。

編集：

ここであなたが望んでいるのは、ホバー可能な領域 (イメージ マップ) を持つ単一のグラフィックを使用することであることがわかります。これを行うには、残念ながら、ホバリング可能な各領域の座標を計算し、次の形式でエリアで構成されるマップ要素を構成する必要があります。

<map name="parts">  
  <area shape="rect" coords="20,6,200,60" text-ref="county1">  
  <area shape="rect" coords="100,200,50" text-ref="county2">  
</map>

次に、これらの各領域を個別の jQuery マウスオーバー イベントにリンクして、必要なことを達成できるようにする必要があります。私はあなたが始めるために別のフィドルを作成しました - これについて長い道のりを歩んでしまったことをお詫びします!

http://jsfiddle.net/jcAe9/

于 2013-03-22T09:23:47.747 に答える