将 css 应用于区域地图答案

【问题标题】：Apply css to AREA MAP将 css 应用于区域地图
【发布时间】：2018-08-25 22:47:59
【问题描述】：

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

【问题讨论】：

标签： html css map area

【解决方案1】：

不，没有办法按照您的描述执行此操作。我已经研究过并尝试过。您可以做的是在各个段上设置鼠标悬停事件，并交换一些在同一区域有阴影的叠加图像。

【讨论】：

【解决方案2】：

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

我不是 SVG 大师，但我举了一个例子：http://jsfiddle.net/tZKuv/3/。对于生产，您可能希望将默认笔画替换为 none，我使用了 gray，因此您可以看到它在哪里。

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

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

更新：制作了一个快速测试页面来测试IE9。它确实按预期工作。 Here's the source。

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

【讨论】：

@PeterBZ 这可能会让人头疼，但我相信您可以为不支持 SVG 的浏览器添加回退行为（即kaizou.org/2009/03/inline-svg-fall）。我想，在你想要让它完全跨浏览器的开发时间与实现它的容易程度之间进行权衡。祝你好运！
查看 raphael.js - 它是适用于所有浏览器 IE6+ 的 SVG。据我所知，除了早期 Android 手机中的股票浏览器之外，它什么都能做。
你的 JSfiddle 在 (Internet Explorer, Chrome) 和 Firefox 上给了我不同的结果，可能是什么，Firefox 只是打印三角形的顶部。

【解决方案3】：

无法使用 CSS。
不过，您可以查看Map Hilight jQuery 插件。

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

【讨论】：