css - 替代在复杂多边形上使用 Image-Maps

Question

我必须创建一个非常复杂的地图，它被分成几块，它们本身都是非常复杂的多边形结构。这些以透明 PNG 的形式提供给我。显然我不能只使用矩形 PNG 本身来定义每个鼠标敏感区域。

我想到的第一件事也是最后一件事是使用 Image-Maps。

但在我走这条路之前，我想问是否有人能想到一个更现代的解决方案？

浏览器支持要求为 IE >= 7、FF >= 3、较新的 Chrome 和 Opera。所以使用 CANVAS 可能不是一种选择。

Answer 1

SVG 会是一个不错的选择，有插件可以增加对古代 IE 版本的兼容性。地图并没有什么问题，只要确保链接的位置真的很清楚，因为状态栏没有像普通链接那样的信息。

Answer 2

在设计 Web 文档时，您应该始终选择接近表达您的意图的东西，以便您的文档最适合您没有想到的用例。

图像地图完全适合在地图图像上放置链接。<canvas>使您的文档难以解释。如果 SVG 非常适合您的数据，那么 SVG 将是一个合理的选择，但实现的范围不如图像地图。

Answer 3

IE7 不会支持 SVG 或 Canvas（除非您喜欢 Bradshaw 先生指出的插件），虽然 VML 可能在那里工作，但它是一个泥潭。您可以使用一些 javascript在 mousemove 上计算多边形内的点。但实际上，图像映射（客户端或服务器端）可能是最简单的方法。