65

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

ブロックをいじって失敗した後、これは古い学校のイメージ マップで行うことができると判断しました。4 つの幾何学的形状のアウトラインを含む模式的なテスト マップを作成し、png ロールオーバーを使用して「塗りつぶし」ました。アイデアは、画像マップを下の背景レイヤーに関連付け、すべてのロールオーバーを css {visibility: hidden} で初期化し、Jquery の hover メソッドを使用してそれらを表示し、関連するテキストを別の div で表示することです。別のテキスト関数は、jQuery hover の代わりに :hover 疑似クラスでこれを試みていない理由です。イメージ マップを使用していたので、すべてのロールオーバー png (透明な背景を持つ) を完全なコンテナーに合わせて正確に配置し、すべてが正確に整列するようにしました。

私が得たものはうまくいきます...そうではありません！イメージ マップが正しくマッピングされ、ジオメトリ領域のみがアクティブになります。しかし、各ロールオーバー領域からの href は断続的にしか機能せず、css 可視性で Jquery hover を使用するとめちゃくちゃになります。望ましい動作は、その領域に転がり込むことで単純に形状が固くなることです。実際に何が起こるかというと、シェイプ内の動きによって、表示と非表示がすばやく切り替えられます。カーソルが形状内で停止すると、表示される場合と表示されない場合があります。どんなアイデアでも大歓迎です！

ホバー設定のサンプル (最終的には、実際のロールオーバー、関連するリンク、およびテキストに配列を使用します):

$('#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>
4

4 に答える 4

43

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

Image Mapsterは、Map Hilight のいくつかの欠点を解決するために私が書いた jQuery プラグインです (最初はそのプラグインの拡張でしたが、その後ほぼ完全に書き直されました)。当初、これは領域の選択状態を維持し、ブラウザの互換性の問題を修正する機能にすぎませんでした。ただし、数か月前の最初のリリース以来、ハイライトのソースとして別の画像を使用する機能など、多くの機能を追加しました.

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

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

于 2011-07-14T15:24:52.273 に答える
3

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

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

于 2009-07-29T15:18:08.537 に答える
2

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

于 2009-12-15T22:46:06.123 に答える