将css应用于AREA MAP

22 html css map area

我为地图中的区域创建了一个非常大的地图,其中包含许多多边形区域(每个超过20个坐标).但是,您不能将CSS添加到AREA标记,因为我被告知它不是可见元素.我想要做的是当用户将鼠标悬停在地图上的某个区域时,我希望通过对特定AREA元素应用1px边框来"突出显示"它.有办法做到这一点吗?不,我不打算使用矩形.

Su'*_*Su' 16

CSS无法实现.
不过,您可以查看Map Hilight jQuery插件.

编辑10.2011
ImageMapster是一个更新,更强大的插件,你也应该检查.


Sap*_*pph 10

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

我不是SVG大师,但这是一个我掀起的例子:http://jsfiddle.net/tZKuv/3/.对于生产,您可能希望用none我更换的默认笔划,gray以便您可以看到它的位置.

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

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

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

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