問題タブ [imagemap]

この画像に似たマップのホバー効果をマークアップしてコーディングする方法を考えています。

各地区 (またはセクション) がマウスオーバー/タッチ/クリックされたときに、他のセクションに影響を与えずに色を変更する必要があります。各セクションの境界は画像を代表するものである必要があり、正方形であってはなりません。私が取り組んでいるサイトは古いブラウザーで使用できる必要があるため、このソリューションではキャンバスを使用できません (個人的にはがっかりです)。

理想的には、JavaScript や大量の画像を使用せずに、CSS でこれを行いたいと考えています。誰もこれを以前にやったことがありますか？

編集：人々がタグを提案していることは知っていますが、知る<area>限り、それは :hover 擬似クラスを受け入れません。

編集 2: 私はこれを使用するかもしれません: http://www.netzgesta.de/mapper/

1) マウスオーバー時に不透明度を変更してホバーした領域を強調表示し、2) ホバーした領域の詳細を表示する簡単なツールチップを追加する必要があります。

出来ますか？両方を実行できる jquery プラグインはありますか。

助けてくれて本当にありがとうございます！

areaコンテンツIDを現在のaltに設定したいのですが。

ありがとう！

マップを操作するには、便利な jQuery ツール (プラグイン) が必要です。

このプロジェクトには、都市がマークされた narisovanaya マップ、可能なルートがあります。

例

したい：

• ルート (この例では緑色で表示) をマップ (img) の上に適用するには
• 都市に関する情報を含む小さな div を表示する

キャンバスを介してマップを実装するとうまくいくと思う傾向がありますが、都市に関する情報を含む div を表示するのが便利かどうかはわかりません。

たぶん、誰かが同様の問題に遭遇し、間違いを避けるのを手伝ってくれます.

javascript を実行している IE (そうではない) に問題があります。マウスオーバーを IE8 のイメージ マップにアタッチする際に既知の問題はありますか? 似たような投稿は見当たりません。

たとえば、私のページの 1 つの HTML は次のとおりです。

ものすごく単純。IE を除くすべてのブラウザーで、これは「フェード」機能を実行して、何らかの情報を含む div をフェードイン (またはフェードアウト) します。

関数自体はhere ですが、問題は関数ではなく、マウスオーバーにあると思います。

ありがとう、

-tcm <><

チュートリアルまたはコードの適切なリンクを教えてください:
サーバー側イベントに画像マップを提供する方法asp.net MVC2.

私の目標は、paintComponent() メソッドで 2D グラフィックスを使用して複数の画像を描画することです。ただし、各画像が選択されているかどうかを知るために MouseListener を追加する方法がわかりません。

これまでの私の解決策は、マウスクリックの座標を記録し、それらが各画像の境界内に含まれているかどうかを確認するだけです。ただし、これはより複雑な境界を持つ画像では困難です。

別のオプションとして、単純な形状を作成して画像の上に配置することもできますが、より複雑な境界を持つ画像は難しいでしょう。ここにあるSO に関する別の議論で 、誰かが GeneralPath を使用してより複雑な形状を描画することに言及しました。で遊んだことはありませんが、これは励みになるようです。

これらの 2 つのオプションのうち、最良の解決策と思われるもの、または他の推奨事項はありますか

半透明の div とアンカーでオーバーレイする必要があるイメージ マップを含むイメージがあります。画像と画像マップはページごとに異なるため、実際のコードは画像マップを動的に生成し、オーバーレイされたリンクに 1 つの div とアンカーを再利用します。

Fiddleでコードの簡略化されたバージョンを確認できます。Firefox と IE の両方で動作させるのに苦労しました。コードは現在のように両方で機能しますが、マウスを IE の黄色のボックスの左側にゆっくりと移動すると、「ハイライト」div の白い背景が取り残されます。アラートのコメントを外すとわかるように、mouseleave機能は毎回トリガーされるため、問題は次の行にあるようです。

CSS をハイライト div のアンカーからハイライト div 自体に変更すると、Firefox と IE の両方で長引く div の問題が発生します。ハイライト a:hover を使用すると、IE でのみ発生し、Firefox は正常に動作します。

ハイライト ボックスのインライン CSS から「background-color: white」を除外すると、IE でコードが失敗します。ハイライトはまったく表示されません。

a:hover 疑似クラスとハイライト div 自体の間で CSS を切り替えたり、JQuery でさまざまな関数を使用したり、IE で確実に機能するものはありません。

MapHilight などの JQuery プラグインを調べてみたところ、使用しなければならない他のコードで問題が発生していました。

これをIEや他のブラウザで確実に動作させるために私が欠けているものを見ることができますか?

私の単純なアプリケーションは、画像上に Web リンクを配置します。画像の種類によって、Web リンクの数は異なります。ImageMap コントロールを使用し、ホット スポットの背後にあるコードを追加します。座標と URL はデータベースから取得されます。以下にコードがあります：

問題は、アプリを実行し、アクティブなリンクが 1 つしかない場合です (ただし、この特定の DataTable オブジェクトには 11 行 (リンク) があります)。

以下のHTMLコード：

11 個のホット スポットが追加されましたが、それぞれの座標と URL 文字列の ID は同じです。何が起こったのか、プログラムで ImageMap に複数のホットスポットを追加する方法を誰かに説明してもらえますか?

画像のさまざまな領域で HTML で画像をクリック可能にし、さまざまな URL につながるようにするにはどうすればよいですか?リンク... ボタンの片側は「サインアップ」で、反対側は「試してみる」です