html - 将 css 应用于区域地图

Question

我为地图内的区域创建了一个非常大的地图，其中包含许多多边形区域（每个区域超过 20 个坐标）。但是，您不能将 css 添加到 AREA 标签，因为有人告诉我它不是可见元素。我想要做的是当用户将鼠标悬停在地图上的某个区域上时，我希望通过将 1px 边框应用于特定的 AREA 元素来“突出显示”它。有没有办法做到这一点？不，我不会使用矩形。

Answer 1

使用 CSS 是不可能的。
不过，您可以查看Map Hilight jQuery 插件。

EDIT 10.2011
ImageMapster是一个更新、更强大的插件，您也应该检查一下。

Answer 2

如果您希望能够使用任意形状并仍然使用样式，您是否考虑过尝试 SVG？

我不是 SVG 大师，但这是我制作的一个示例：http: //jsfiddle.net/tZKuv/3/。对于生产，您可能希望将默认笔划替换为none, 我使用过gray这样您就可以看到它在哪里。

缺点是你会失去易于使用的区域/地图给你，但我想如果你走这条路，你可以实现你的目标。我添加cursor: pointer到多边形中，您可以添加处理onclick程序来模拟href.<area>

一个明显的警告是浏览器支持。这似乎在 Chrome 中工作，我很确定它应该在 IE9 中工作（jsfiddle 目前不在 IE9 中工作），但以前版本的 IE 不支持 SVG。

更新：制作了一个快速测试页面来测试 IE9。它确实按预期工作。这是来源。

再次更新：这也将解决您在另一个问题中询问的缩放问题。

Answer 3

不，没有办法像你描述的那样做到这一点。我已经研究过并尝试过。您可以做的是在各个段上设置鼠标悬停事件并交换一些在同一区域有阴影的叠加图像。