HTML/JavaScript: mouseover effect for image maps?

Question

I'm trying to help out a nonprofit by doing their website. They want (ugh) their logo to serve as an HTML image map. In other words, when you click on different parts of the logo, you're directed to different web pages. They also, however, want mouseover effects: when you mouseover a particular portion of the image map, that piece of the graphic should be highlighted.

If the logo was simple, I would slice it up into rectangles and attach mouseover and click events to the appropriate rectangles. With the complexity of their logo, this is not possible, however.

Has anyone done anything like this without Flash? I'm not a Flash developer but this is looking like a very difficult task in just HTML/JavaScript.

Any ideas? Thanks!

Answer 1

You need to handle the mouseover event of the <area> tag.

Answer 2

Have a look at the HTML map tag - http://www.w3schools.com/TAGS/tag_map.asp. It allows for more custom shapes.

Some resources:

• http://www.elated.com/articles/creating-image-maps/
• http://www.image-maps.com/

Answer 3

Try out this resource to:

• http://dhost.info/eleomap/