CSS 交互式地图 - 重叠的县在悬停时改变颜色
我被要求创建一张英国地图，描绘各个县。一旦将县悬停在上面，它们就会改变颜色，点击它们就会进入中间页面。闪存也不是一个选择。
通常这不会成为问题，但由于县的形状奇特，这些可以悬停的区域将严重重叠，这意味着任何被另一个县悬垂覆盖的县都将无法悬停。
我知道我见过一个类似的事情没有重叠问题的例子，但我根本找不到它。有谁知道我如何做到这一点而不重叠成为最终用户的大问题？
我没有任何代码可以展示，因为我还没有开始研究它，我只是知道这会很头痛。我将使用的地图很可能与此相同： http://proofs10.issl.co.uk/images/contact-map.jpg 正如您所看到的，如果我将元素覆盖在每个县上，就会产生问题。
I've been asked to create a map of the UK, depicting counties. Once the counties are hovered, they change colour, and clicking on them goes to an intermidiary page. Flash is also not an option.
Usually this wouldn't be a problem but because of the odd shapes of the counties, these areas that can be hovered are going to overlap quite heavily, which means any county being covered by the overhang from another county won't be hoverable.
I know I've seen an example of a similar thing being done without the overlapping problem but I can't find it at all. Does anyone have any ideas as to how I might do this without overlapping becoming a big problem for the end user?
I don't have any code to show as I've not begun work on it yet, I just know it's going to be a headache. The map I'll be using is mostly likely going to be the same as this one: http://proofs10.issl.co.uk/images/contact-map.jpg and as you can see if I overlay elements over each county that's going to create a problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
有了 flash 就不可能了，你唯一的选择就是 javascript。我使用了jquery插件：
http://davidlynch。 org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
该文档非常好。一旦你掌握了它的窍门，一切就变得轻而易举了。祝你好运。
With flash out of the question your only other option is javascript. I have used a jquery plugin:
http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
The documentation is pretty good. Once you get the hang of it it's a breeze. Good luck.
可能有点矫枉过正，但 OpenLayers 是一个跨浏览器 JavaScript 库，可让您在网页上放置可缩放、可拖动的交互式地图。可以使元素在悬停时突出显示并在单击时执行某些操作。如果您只想要固定地图，则可以限制缩放和平移。
您必须以合适的矢量格式获取县地图（GML 效果很好）。
Probably slightly overkill, but OpenLayers is a cross-browser JavaScript library that lets you put zoomable, draggable interactive maps on your web page. Elements can be made to highlight on hover and do something on click. You can restrict the zooming and panning if you just want a fixed map.
You'd have to get your county map in a suitable vector format (GML works well).