How can I make MouseOver an exact image shape?

Question

The question below is not a programming question, but the question "how can I do this," recommendations for implementation.

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

What I want to do is create a hover over a function for each continent. When the user's mouse is over the continent - the EXACT form of the continent - I want it to change color.

My main question is: how can I refer when the user mouse is over the shape of the exact continent? I don’t want to use Flash for this, that’s all, although I’m afraid there is no other way to do this?

Thank you all

Answer 1

The only way I know how to do this (without external libraries or js) is used <map>. You will need to enter the coordinates and form (in this case poly for the form) according to the area you want to allow: http://www.w3schools.com/TAGS/tag_map.asp

Answer 2

In response to your main question, you probably need to use an old, good image map. This image map generator worked well for me in the past.

As for the color change, can you always use a sprite and just change the background position of each country when you hover over it?

Answer 3

jQuery: http://plugins.jquery.com/project/maphilight

: 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 Internet you can use an image map.

In any application hosted on the OS, you can make the equivalent of an image map using a region. Or you can even check the color of the pixel you are hovering over.