CSS交互式地图 - 重叠县在悬停时改变颜色

时间:2010-09-23 09:59:53

标签: css hover overlap

我被要求创建一张描绘郡的英国地图。一旦各县徘徊,它们就会改变颜色,点击它们会进入中间页面。 Flash也不是一种选择。

通常情况下这不是问题,但由于县的奇怪形状,这些可以徘徊的区域将重叠很多,这意味着任何一个被另一个县的悬崖覆盖的县将不会hoverable。

知道我见过一个类似的事情的例子没有重叠的问题,但我根本找不到它。有没有人对我如何做到这一点没有重叠成为最终用户的大问题?

我没有任何代码可以显示,因为我还没有开始工作,我只是知道它会很头疼。我将使用的地图很可能与这个地图相同:http://proofs10.issl.co.uk/images/contact-map.jpg并且您可以看到我是否覆盖了每个县的元素,这将导致问题。

2 个答案:

答案 0 :(得分:2)

闪存不存在问题你唯一的其他选择是javascript。我使用了jquery插件:

http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/

文档非常好。一旦掌握了它,它就变得轻而易举。祝你好运。

答案 1 :(得分:1)

可能略微过度,但OpenLayers是一个跨浏览器的JavaScript库,可让您在网页上放置可缩放的,可拖动的交互式地图。可以使元素在悬停时突出显示并在点击时执行某些操作。如果您只想要一张固定的地图,可以限制缩放和平移。

您必须以合适的矢量格式获取您的县地图(GML效果很好)。