HTMLイメージマップで使用してjQueryのホバー

StackOverflow https://stackoverflow.com/questions/745110

質問

私は、追加のテキスト表示し、それぞれのための関連リンクと一緒に、ロールオーバーイラストのハイライトを必要とする小領域の多くの複雑な背景イメージを持っています。最終的な図は、z屈折率を用いて、透明性を有するいくつかの静止画像をスタック、およびハイライトロールオーバー図は、所望の効果を達成するために、間に「サンドイッチ」層の一方に表示する必要があります。

ブロックを持ついくつかの失敗のあいた後、私は、これは古い学校のイメージマップで行われるかもしれないことを決めました。私は4つの幾何学的形状の輪郭との模式的なテストマップを作り、それらをPNG形式のロールオーバーを使用して「いっぱい」。それらが見えるようならびに別のdivに関連するテキストを明らかにするためにjQueryのホバーメソッドを使用する：アイデアは、下部バックグラウンド層とイメージマップを関連付けるCSS {隠れて視認}を持つすべてのロールオーバーを初期化することです。 hover疑似代わりにjQueryのホバー：私はこれにしようとしていないよ、なぜ別のテキスト機能があります。私がイメージマップを使用していたので、私は正確に（透明な背景を持っている）すべてのロールオーバー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>

他のヒント

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

画像Mapster には、私は地図HILIGHTの欠点のいくつかを解決するために書いた（と、それが最初だったjQueryのプラグインですそのプラグインの拡張、それは以来、ほぼ完全に書き直されていますが）。最初は、これは、エリアの選択状態を維持し、ブラウザの互換性の問題を修正するだけの能力がしました。数ヶ月前にその最初のリリース以来、しかし、私はハイライトのソースとして別の画像を使用する機能など、多くの機能が追加されています。

また、あなたが「穴」で領域を作成し、さらに領域の複雑なグループを作成することができることを意味し、「マスク」などの領域を特定する能力を持っています。例えば、面積Aは、別のエリアBが強調表示される可能性があり、それ自体B領域はマウスイベントに応答しないでしょう。

機能のほとんどを示してWebサイト上のいくつかの例があります。 githubのリポジトリにも、より多くの例と完全なドキュメンテーションを持っています。

私は、私が過去に使用しているこの素晴らしいマッピングスクリプト（ mapper.js に）見つかりました。何それについて異なるのは、あなたがマップまたはマップエリアのハイライトを作るためにあなたのページ上のリンクの上にカーソルを置くことができます。悲しいことに、それはJavaScriptで書かれており、HTMLでのインラインコーディングの多くを必要だ - 私は、このスクリプトはjQueryのに移植見てみたい：P

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

jQueryのMaphilightプラグインが仕事をしていませんが、

、それはあなたのHTML内の古くなった冗長イメージマップに依存しています。私は、外部mapcoordinatesを維持することを好むだろう。これはjqueryのイメージマッププラグインでJSのようになりますが、状態をホバー欠けています。素敵な解決策は、グーグルがフラッシュとJSで可視化をジオあります。しかしvectordataこの種のオープンソースの将来は、しかし、SVG、すべての最新ブラウザaccross SVGサポートを考慮すると、フラッシュのためsvgwebがIEのために変換するグーグル、なぜjqueryのは、JSのデモのように、SVGマップへのリンクとhoverstatesを追加するプラグインではありませんここの？そのように、あなたもイメージマップ座標にvectormapを変換する複雑なステップを避けます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top