How can I do a MouseOver of exact image shape?

Question

The question below is not really a programming question, but more of "how can I do this" question, implementation advice.

I have an image of the world map. I can make each continent a separate image.

What I want to do is create a hover over feature for each continent. When the users mouse is over the continent - the EXACT shape of the continent that is - I want it to change colour.

My main question is, how can I reference when the users mouse is over the exact shape of the continent? I do not want to use Flash for this, all though I am afraid there is no other way to do this?

Thanks all

Answer 1

The only way I know how to do this (without external libraries or js) is using <map>. You will have to put in the coords and shape (in this case poly for the shape) to match the area you want to allow: http://www.w3schools.com/TAGS/tag_map.asp

Answer 2

In answer to your main question, you'll probably need to use a good old image map. This image map generator has worked well for me in the past.

As for making them change colors, you could always use a sprite and just change the background position of each country on hover?

Answer 3

You should look into this jQuery plugin: http://plugins.jquery.com/project/maphilight

and theres a tutorial here: http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/

Answer 4

It depends on your platform (web, winform, linux, os x, etc.).

On the web, you can use an image map.

On any OS-hosted application, you could do the equivalent of an image map using a region. Or you could even test the color of the pixel over which you are hovering.