javascript - How can I do a MouseOver of exact image shape? - Stack Overflow

admin管理员组

文章数量:1309995

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

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

• javascript
• html
• implementation

Share Improve this question Follow asked Nov 6, 2009 at 15:09 AbsAbs 58k103103 gold badges282282 silver badges417417 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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./TAGS/tag_map.asp

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?

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

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

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.

本文标签： javascriptHow can I do a MouseOver of exact image shapeStack Overflow