Thursday, December 20th, 2007

Mapper.js 1.0: Highlighting for imagemaps

Category: Canvas, JavaScript, Library

Christian Effenberger has doubled up to release Mapper.js 1.0, a library that allows you to add automatic area highlighting to image maps
on webpages. It uses unobtrusive javascript to keep the code clean.

It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+,
Safari and IE6+. On older browsers, it can use “jsgraphics” from
Walter Zorn (if installed), else it’ll degrade and visitors won’t
notice a thing.

You are able to create an image map, and then define the colors through the simple CSS class microformat:

  1. <img class="mapper iborder00aa00 icolor00ff00" src="images/eu.gif" usemap="#map_of_europe" />


Posted by Dion Almaer at 1:15 am

4.4 rating from 64 votes


Comments feed TrackBack URI


Comment by jimbob — December 20, 2007


I’m not sure why this makes you so sleepy jimbob. As someone who is a little less than comfortable with using Flash to create a map that is clickable and has rollover effects this is a truly helpful tool. Anyone who needs to have a map (say, of the United States) will be able to add some flair to their otherwise dull image map.

Great job and thanks.

Comment by tastypopsicle — December 20, 2007

It appears there’s a typo in this script. I couldn’t get it to work correctly in IE6, and upon further examination:

In line 110, the “top” property is defined as follows:


When it should be:


A nice little script for those of us who need to use imagemaps regularly. Thanks!

Comment by MattP — December 20, 2007

Looks very useful. However, using their example of the German region map, if you select Brandenburg, it also selects “Berlin”. I’m wondering if this is an issue with implementation, or an issue with the library.

Comment by Ipequey — December 20, 2007

Their imagemap is badly cut up. It makes for a poor example of a potentially cool pattern.

Comment by Trevor — December 20, 2007

to: MattP

Thanks for your debug support. You’re right, it’s a typo.

to: Ipequey

It’s not an issue with the library. It’s only a matter of organizing the area data.

to: Trevor

Christian Effenberger
Which map, which browser?

Comment by Christian Effenberger — December 21, 2007

The first map, Safari 3.0.4.

Comment by Trevor — December 21, 2007

this lib was made on a mac with Safari 3.0.4.
If there is a problem, send me a screenshot.

Comment by Christian Effenberger — December 22, 2007

I think I know what you mean. It’s the general image map weakness of WebKit. Try the same image map with Javascript off and move over different areas. You’ll realize that Safari is unable to differentiate exactly between the areas. So this is a bug of the webkit engine.

Comment by Christian Effenberger — December 22, 2007

Version 1.3 now supports individual area highlighting!

Comment by ucanmexwise — April 7, 2008

Version 1.4 now supports multiple area selections

Comment by ucanmexwise — April 9, 2008

Version 2.0 supports round corners, forced group attributes and additional features

Comment by ucanmexwise — June 5, 2008

Leave a comment

You must be logged in to post a comment.