web-dev-qa-db-ja.com

HTMLイメージマップでのJQueryホバーの使用

ロールオーバーイラストのハイライトを必要とする多くの小さな領域を含む複雑な背景画像と、追加のテキスト表示とそれぞれの関連リンクがあります。最終的な図は、z-indexを使用して透明な複数の静的画像をスタックし、ハイライトロールオーバーの図は、目的の効果を得るために中間の「サンドイッチ」レイヤーの1つに表示する必要があります。

ブロックをいじるのにいくつか失敗した後、私はこれが古い学校のイメージマップで行われるかもしれないと決めました。 4つの幾何学的形状のアウトラインを含む概略テストマップを作成し、PNGロールオーバーを使用してそれらを「塗りつぶし」ました。イメージマップを下の背景レイヤーに関連付け、すべてのロールオーバーをcss {visibility：hidden}で初期化し、Jqueryのホバーメソッドを使用してそれらを表示し、関連するテキストを別のdivに表示します。別のテキスト関数は、jQueryホバーの代わりに：hover擬似クラスでこれをしようとしない理由です。イメージマップを使用していたため、すべてのロールオーバーpng（透明な背景を持つ）を完全なコンテナーのサイズに合わせて正確に配置し、すべてが正確に揃うようにしました。

私が手に入れたものは...本当にそうではありません！イメージマップが正しくマップされ、幾何学的領域のみがアクティブになります。しかし、各ロールオーバーエリアからのhrefは断続的にしか機能せず、CSSの可視性でJqueryホバーを使用すると混乱します。望ましい動作は、その領域に転がり込むだけで形状が堅くなることです。実際に発生するのは、図形内の任意の動きにより、表示と非表示をすばやく切り替えることです。カーソルが形状内で停止すると、表示される場合と表示されない場合があります。どんなアイデアでも感謝します！

ホバー設定のサンプル（最終的に実際のロールオーバー、関連リンク、テキストに配列を使用します）：

$('#triangle').hover(
    function() {
        $('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
        $('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

イメージマップ：

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>
javascriptjqueryhoverimagemap
65
boomturn

このプラグインをチェックアウトする必要があります。

https://github.com/kemayo/maphilight

そしてデモ：

http://davidlynch.org/js/maphilight/docs/demo_usa.html

どちらかといえば、あなたはそれを修正するためにそれからいくつかのコードを借りることができるかもしれません。

60
mkoryak

この質問は古いですが、当時存在しなかった受け入れられた答えに代替を追加したかったです。

Image Mapster は、Map Hilightのいくつかの欠点を解決するために作成したjQueryプラグインです（その後、ほぼ完全に書き直されましたが、当初はそのプラグインの拡張機能でした）。当初は、これはエリアの選択状態を維持し、ブラウザーの互換性の問題を修正する機能でした。数ヶ月前の最初のリリース以来、ハイライトのソースとして代替画像を使用する機能を含む多くの機能を追加しました。

また、エリアを「マスク」として識別する機能もあります。つまり、「穴」のあるエリアを作成し、さらにエリアの複雑なグループを作成できます。たとえば、エリアAによって別のエリアBが強調表示される場合がありますが、エリアB自体はマウスイベントに応答しません。

Webサイトには、ほとんどの機能を示すいくつかの例があります。 github repository には、さらに多くの例と完全なドキュメントがあります。

42
Jamie Treworgy

過去に使用したこの素晴らしいマッピングスクリプト（ mapper.js ）を見つけました。異なる点は、ページ上でマップまたはリンクにカーソルを合わせて、マップ領域を強調表示できることです。悲しいことにjavascriptで書かれており、HTMLで多くのインラインコーディングが必要です。このスクリプトをjQueryに移植するのが楽しみです：P

また、すべてのデモをチェックしてください！ この例 は、（フラッシュを使用せずに）簡単なオンラインゲームにできると思います-異なるカメラアングルをクリックしてください。

3
Mottie

JQuery Maphilightプラグインはその役割を果たしますが、htmlの古い詳細なイメージマップに依存しています。 mapcoordinatesを外部に保持したいです。これはjquery imagemapプラグインを使用したJSの場合がありますが、ホバー状態がありません。素敵なソリューションは、フラッシュとJSでのGoogleジオマップの視覚化です。ただし、この種のベクターデータのオープンソースの未来はsvgであり、すべての最新ブラウザーでsvgをサポートし、IEのフラッシュ変換用のgoogles svgwebを考慮します。JSデモのようにsvgマップにリンクとホバーステートを追加するjqueryプラグインはどうですか ここ ？これにより、ベクトルマップをイメージマップ座標に変換する複雑な手順も回避できます。

2
newnomad