Html 将 css 应用到区域地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5026421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply css to AREA MAP
提问by
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
我为地图内的区域创建了一个非常大的地图，其中包含许多多边形区域（每个区域超过 20 个坐标）。但是，您不能将 css 添加到 AREA 标记，因为我被告知它不是可见元素。我想要做的是当用户将鼠标悬停在地图上的某个区域上时，我希望通过将 1px 边框应用于特定的 AREA 元素来“突出显示”它。有没有办法做到这一点？不，我不打算使用矩形。
采纳答案by Sapph
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
如果你希望能够使用任意形状并仍然使用样式，你是否考虑过尝试 SVG？
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used grayso you can see where it is.
我不是 SVG 大师，但这是我提出的一个例子：http: //jsfiddle.net/tZKuv/3/。对于生产，您可能希望用 替换默认笔划none，我使用了gray这样您就可以看到它的位置。
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointerto the polygon and you can add onclickhandlers to simulate the hrefof <area>.
缺点是你会失去易于使用的区域/地图给你，但我想如果你走这条路，你可以实现你的目标。我添加cursor: pointer到多边形，你可以添加onclick处理程序来模拟href的<area>。
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
一个明显的警告是浏览器支持。这似乎在 Chrome 中工作，我很确定它应该在 IE9 中工作（jsfiddle 目前不在 IE9 中工作），但以前版本的 IE 不支持 SVG。
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
更新：制作了一个快速测试页面来测试 IE9。它确实按预期工作。这是来源。
Update again: This would also solve the zooming problem you asked about in another question.
再次更新：这也可以解决您在另一个问题中询问的缩放问题。
回答by Su'
Not possible with CSS.
You might check out the Map HilightjQuery plugin, though.
用 CSS 不可能。
不过，您可以查看Map HilightjQuery 插件。
EDIT 10.2011
ImageMapsteris a more recent, and more powerful plugin you should also check out.
编辑 10.2011
ImageMapster是一个更新的、更强大的插件，你也应该看看。
回答by Diodeus - James MacFarlane
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
不，按照您的描述没有办法做到这一点。我已经研究过并尝试过。您可以做的是在各个段上设置鼠标悬停事件，并交换一些在同一区域着色的叠加图像。
