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:
HTML:
-
-
<img class="mapper iborder00aa00 icolor00ff00" src="images/eu.gif" usemap="#map_of_europe" />
-
4.5 rating from 58 votes
yawn
yawn?
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.
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:
top:'+parseInt(v[0])+’px;
When it should be:
top:'+parseInt(v[1])+’px;
A nice little script for those of us who need to use imagemaps regularly. Thanks!
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.
Their imagemap is badly cut up. It makes for a poor example of a potentially cool pattern.
This is great. I actually needed something like this for my site. I’m trying to create a local map. Thanks.
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
Regards
Christian Effenberger
Which map, which browser?
Christian,
The first map, Safari 3.0.4.
Trevor,
this lib was made on a mac with Safari 3.0.4.
If there is a problem, send me a screenshot.
Trevor,
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.
Version 1.3 now supports individual area highlighting!
Version 1.4 now supports multiple area selections
Version 2.0 supports round corners, forced group attributes and additional features