将 css 应用到区域地图
我创建了一个非常大的地图，其中包含许多多边形区域（每个多边形区域超过 20 个坐标），用于地图内的区域。但是，您无法将 css 添加到 AREA 标记，因为我被告知它不是可见元素。我想要做的是，当用户将鼠标悬停在地图上的某个区域上时，我希望通过向特定 AREA 元素应用 1px 边框来“突出显示”该区域。有办法做到这一点吗？不，我不会使用矩形。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用 CSS 是不可能的。
不过，您可以查看 Map Hilight jQuery 插件。
编辑 10.2011
ImageMapster 是一个更新、功能更强大的插件，您也应该检查一下。
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
如果您希望能够使用任意形状并仍然使用样式，您是否考虑过尝试 SVG？
我不是 SVG 大师，但这是我编写的一个示例： http://jsfiddle.net/tZKuv/3 /。对于生产，您可能需要将默认笔画替换为
none，我使用了gray，以便您可以看到它在哪里。缺点是你会失去易于使用的区域/地图给你的，但我想如果你走这条路你就可以实现你的目标。我向多边形添加了
cursor:pointer，您可以添加onclick处理程序来模拟的href>。一个明显的警告是浏览器支持。这似乎在 Chrome 中工作，我很确定它应该在 IE9 中工作（jsfiddle 目前在 IE9 中不工作），但以前版本的 IE 不支持 SVG。
更新：制作了一个快速测试页面来测试IE9。它确实按预期工作。 这是来源。
再次更新：这也可以解决您在另一个问题中询问的缩放问题。
If you want to be able to use arbitrary shapes and still use styles, have you considered trying 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 usedgrayso you can see where it is.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 addonclickhandlers to simulate thehrefof<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.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
不，按照您的描述，没有办法做到这一点。我已经研究过并尝试过。您可以做的是在各个部分上设置鼠标悬停事件，并交换在同一区域中着色的一些覆盖图像。
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.