4

マッピングしたこの画像があります。多角形の形をした多くの領域があり、ホバーすると領域が色付けされます（色付きとは別の画像を意味します）。また、それに合わせてカスタムツールチップを作成しました。これにより、ホバーすると、色が付いたときに、複数行にまたがる情報を含むテキストボックスが表示されます。

問題は、これら2つをどのように混ぜ合わせるかを理解できないことです。これまでのコードは次のとおりです。

<div style="text-align:center; width:450px; margin-left:auto; "> <img id="Image-           Maps_4201211181157353" src="...Original.png" usemap="#Image-Maps_4201211181157353" border="0" width="450" height="321" alt="" title=""  /> <map id="_Image-Maps_4201211181157353" name="Image-Maps_4201211181157353">

<!--Area1--> <area shape="poly"coords="370,191,363,195,355,194,343,193,339,185,330,173,327,164,325,154,338,149,351,149,364,149,365,165,364,181," href=" " alt=""  id="1" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211181157353').src= '...Area1.png';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211181157353').src= '...Original.png';" /> </map>

Original.pngは元の画像で、Area1.pngはマウスオーバー時に色が変わる領域です。

そして、これはツールチップクラスです。

<a class="tooltip" href="#"> Tooltip
  <span class="custom warning">
       <em>Title</em>Example text
  </span> </a>

ですから、私が欲しいのは、カスタムメイドのツールチップを、マップの各ポリゴン領域のタイトル属性としてマップdiv内に挿入することです。

4

1 に答える 1

2

あなたがする必要があるのは、各 AREA の座標をループして上/左または中央を見つけ、JavaScript を使用してposition:absoluteそれに応じてツールチップの位置を設定することです。長方形の場合は簡単ですが、多角形の場合はもう少し作業が必要です。

これを行う簡単な方法は本当にありません。

参照:マップ エリアの位置を取得する(html)?

于 2012-11-27T19:13:45.017 に答える