Add Hover Effects To Your Image Maps

I came across a post on Web Resources Depot the other day about a JavaScript library called mapper.js that lets you add a hover effect to any regular image map. mapper.js even lets you export your image maps as SVG files if you’re into that kind of thing.

This was kind of a convenient find for me because I had just gotten done building a simple image map for a client site. The exact map, with the hover effect, looks like this:

Alaska Alabama Arkansas Arizona California Colorado Connecticut Connecticut D.C. D.C. Delaware Delaware Florida Georgia Hawaii Iowa Idaho Illinois Indiana Kansas Kentucky Louisiana Massachusetts Massachusetts Maryland Maryland Maine Michigan Michigan Minnesota Missouri Mississippi Montana North Carolina North Dakota Nebraska New Hampshire New Hampshire New Jersey New Jersey New Mexico Nevada New York Ohio Oklahoma Oregon Pennsylvania Rhode Island Rhode Island South Carolina South Dakota Tennessee Texas Utah Virginia Vermont Vermont Washington Wisconsin West Virginia Wyoming

USA Image Map Example

mapper.js works by taking the coordinates defined in the image map and drawing a corresponding shape on an element you have wrapping the image (like a div, for example). It’s compatible with Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.

December 31st, 2007 | JavaScript, Programming | 3 Comments

3 Comments

  1. I just tried it and it works wonders :) Awesome script and awesome find. Thanks :)

    Comment by TB — January 2, 2008 @ 3:58 pm

  2. This script is a cool way to add a little spin to an otherwise old technique in web development. Image maps don’t seem very popular these days thanks to Flash.

    Comment by Link — January 3, 2008 @ 10:05 am

  3. Wow, I’ve never seen that before - it looks pretty cool and definitely handy. I’ll have to give it a try, thanks for introducing me to this. :)

    Comment by Tay - Super Blogging — January 7, 2008 @ 10:47 pm

Leave a comment...