Question

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

对于城市地图，我可能会使用<map>，但似乎不打算在<area>中使用代码。对于城市列表，我会使用一个列表。但是列表似乎总是要缩进。设置样式似乎非常困难，因此列表点会出现在地图上。

那么你实际上用什么呢？

编辑：这只是一个示例，我不想使用谷歌地图或任何东西。我想使用HTML＆amp; CSS！它也可能是家庭树上的人或天空中的星星或任何东西。

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

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

Answer 1

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

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

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

Answer 2

仅供参考：

javascript API。

解释Google Maps API的Article on W3Schools。

关于google的大量信息。

你的意思是什么＆＃34;列表似乎总是缩进＆＃34; ？使用一点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.

您可以使用php或任何其他服务器端语言制作<area>标签。但不确定这种方法是否比使用Google Maps API更容易：）

带有html的非缩进列表

2 个答案: