0

我有一个城市列表，其中包含有关城市的其他信息。我想根据他们的位置将这些城市固定在地图（图像）上，如果您悬停图钉，我想显示附加信息。

对于我可能会使用的城市地图，<map>但似乎不打算在<area>. 对于城市列表，我会使用列表。但是列表似乎总是要缩进的。而且似乎很难设置它们的样式，因此列表点会出现在地图上。

那么你实际上是用什么来做这个的呢？

编辑：这只是一个例子，我不想使用谷歌地图或任何东西。我想使用 HTML 和 CSS！它也可以是家谱上的人或天空中的星星或任何东西。

问题是我有一个语义列表，所以我会使用一个 html 列表，但我不希望它缩进。

由于我的“可访问性”标签被删除而没有在此处添加信息（感谢朋友...）：我希望尽可能多的人可以访问该页面。因此，在屏幕阅读器等上不起作用的解决方案不起作用！

4

2 回答 2

0

CSS 定义了一个样式属性z-index。z-index 最低的元素位于底部，较高的索引与较低的索引重叠。（谷歌“CSS 层”了解更多信息。）

因此，您可以将地图图像<img>放在最低索引处，并将例如文本段落<p>甚至<a href>每个城市的位置放在连续更高的索引处（因为城市标签也可能相互重叠）。

然后，您可以使用onmouseover操作来显示每个城市的信息（Javascript 等）。但是更简单的方法可能是使用title大多数 HTML 标签的属性，大多数浏览器（据我所知）在鼠标悬停时在“工具提示”处实现该属性。它更基本，但对于您的应用程序可能已经足够了。

于 2013-03-08T09:42:29.587 回答
-1

供参考 ：

javascript API。

一篇关于 W3Schools的文章，解释了 Google Maps API。

google上有很多关于这方面的信息。

你是什​​么意思“列表似乎总是缩进”？只需一点 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 或任何其他服务器端语言制作标签。但不确定这种方法是否比使用 Google Maps API 更容易:)

于 2013-03-08T09:16:07.443 回答