0

都市に関する追加情報を含む都市のリストがあります。この都市を位置に応じて地図 (画像) にピン留めし、ピンにカーソルを合わせると追加情報を表示したいと考えています。

都市の地図については、おそらく使用します<map>が、コードを に含めることを意図していないようです<area>。都市のリストについては、リストを使用します。しかし、リストは常にインデントされることを意図しているようです。また、リスト ポイントがマップ上に表示されるようにスタイルを設定するのは非常に難しいようです。

では、これには実際に何を使用しますか？

編集: これは単なる例であり、Google マップなどは使用したくありません。HTML&CSSを使いたい！それはまた、家系図や空の星などの人物である可能性もあります。

私は意味的にリストを持っているので、htmlリストを使用しますが、インデントしたくありません。

ここに情報を追加せずに「アクセシビリティ」タグが削除されたため (ありがとう、仲間...): できるだけ多くの人がページにアクセスできるようにしたい. そのため、スクリーン リーダーなどで機能しないソリューションは機能しません。

4

2 に答える 2

0

CSS は style 属性を定義しますz-index。最小の z インデックスを持つ要素が一番下に移動し、高いインデックスが低い要素と重なります。(詳細については、「CSS レイヤー」の Google を参照してください。)

したがって、マップ イメージ<img>を最も低いインデックスに配置し、たとえばテキスト パラグラフを配置し<p>たり<a href>、各都市を連続して高いインデックスに配置したりすることができます (都市のラベルも互いに重なる可能性があるため)。

次に、onmouseoverアクションを使用して各都市の情報を表示できます (Javascript など)。しかし、はるかに簡単な方法はtitle、ほとんどのブラウザー (私が知る限り) がマウスオーバーの「ツールチップ」として実装するほとんどの HTML タグの属性を使用することです。より基本的なものですが、アプリケーションには十分かもしれません。

于 2013-03-08T09:42:29.587 に答える
-1

ご参考までに ：

javascriptAPI。_

GoogleMapsAPIを説明するW3Schoolsに関する記事。

グーグルでこれについてのたくさんの情報。

そして、「リストは常にインデントされているように見える」とはどういう意味ですか？CSSを少し使用すれば、HTMLリストで何でもできます。

ul {list-style-type:none;}
ul li {margin:0; padding:0;}

そして、<map>要素の定義と使用法は次のとおりです。

The <map> tag is used to define a client-side image-map. 
An image-map is an image with clickable areas. The required name attribute of 
the <map> element is associated with the <img>'s usemap attribute and creates a
relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable
areas in the image map.

<area>phpまたはその他のサーバー側言語でタグを作成できます。しかし、このアプローチがGoogleMapsAPIを使用するよりも簡単かどうかはわかりません:)

于 2013-03-08T09:16:07.443 に答える