CSS Interactive Map - Overlapping counties changing colour on hover

Question

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.

Answer 1

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.

Answer 2

in response to the reply, thanks a lot for that link. out of curiosity, i'm guessing it won't work with older browsers that don't support <canvas> as it's an HTML 5 tag?

Answer 3

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).