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:
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+.
I just tried it and it works wonders :) Awesome script and awesome find. Thanks :)
Comment by TB — January 2, 2008 @ 3:58 pm
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
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
Found a great tutorial on an image map hover which completely swaps out one image for another while hovering over the map area.
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479771#main
Comment by G83 — August 26, 2009 @ 1:52 am
10x so much for this. i will definitely try this on my intranet
Comment by wussy ash — September 17, 2009 @ 8:51 am
Bad licence, look at this: http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/
Comment by think!! — January 8, 2010 @ 3:55 am
Interesting. I am going to use it in my on-line DM distribution network. Thanks for your information.
Comment by allankliu — June 16, 2010 @ 6:09 pm