html - 使用 CSS 向下钻取数据的图形 map

Question

我们有一个新元素，客户是一个大型住宅区。有10个地区/区(1区、2区等..)，客户提供了 map 。

每个区有3-4栋住宅楼，每栋楼里都有公寓楼。在每栋公寓楼中，都有可供出租的房间。

客户想要每个级别(整个区域、每个区域、每个建筑物、每个公寓、每个房间)的图形 map 。

map 没有完美的形状。 我们已经完成了数据库，并且我们已经深入研究了表格数据。我们正在寻找每个级别 map 的 PNG，并在 map 的特定区域上有某种覆盖 DIV，显示绿色(可用房间)、红色(已占用)等……或者像 150-可用、235- 可用的计数器.

用户可以单击每个 map 区域并通过向下钻取到其他 MAPS 来获取更多详细信息。我们已经研究过创建一个包含字段的表以动态生成 html:

<map name="mapDistrict"> <area shape="circle" coords="90,58,3" href=" Building/1" alt=" Building 1"> <area shape=" poly" coords="124,58,8" href=" Building/2" alt=" Building 2"> </map>

有更好的解决方案吗？我们想使用 CSS、Javascript (JQUERY) .. 没有 FLASH!

Answer 1

这种类型的房地产 map 我做过很多次。你正在做的事情非常有效。您可能希望使用 JS 数组或 JSON 将单位映射到坐标以及每个单位的状态。

对于整栋建筑，您可能想看看这个:http://www.netzgesta.de/mapper/ ，它将 map 区域转换为彩色叠加层。

有一些other approaches您可能需要考虑简单地使用方形定位链接。

您还可以将事件连接到您的区域 map 以显示叠加层:

<area COORDS="80,88,120,125" HREF="#" onMouseOver="showUnit('a')">