Tanabicom: Right-Click Here to Bookmark
jQuery Imagemap Emulator
Recently, I had a bit of a problem; I needed HTML image map capabilities, but I couldn't actually use an image map without significantly restructuring the site (and not for the better!). So instead, I wanted to turn an HTML DIV element (with an image background propery) into an image map.
This is a fairly easy thing to do; I didn't even bother looking to see if it existed. I just made a very static pair of jQuery event handlers which together worked to simulate an image map. However, I soon found I needed this ability in several other places, so for sanity's sake I just turned it into a jQuery plugin.
Again, I wouldn't be surprised if this existed someplace else -- but a quick look at jQuery's plugins list didn't reveal anything that jumped out at me as being the same. So I've decided to package this and release it in case it's something helpful for someone else. This should, theoretically, work with any HTML element and not just DIVs though it has mostly been tested with DIVs. Here's a usage sample:
And here's the code for it:
function alertCallback(){ alert('Found one!'); }
$('#example').imagemap([
{top_x: 0,top_y: 0,bottom_x: 75,bottom_y:65,callback: alertCallback},
{top_x: 150,top_y: 105,bottom_x: 265,bottom_y:170,callback: alertCallback},
{top_x: 315,top_y: 5,bottom_x: 395,bottom_y:60,callback: alertCallback}
]);
It is known to work for FireFox and Internet Explorer 6+. It comes with a companion function that helps you map points; the points are constant and (theoretically) relative to the DIV you are in though in practice it seems mildly random. Here's a sample of the companion function:
And again, the code:
$('#companion').imagecoords();
There are a few known issues:
- There's pratically no error checking. This is mostly for speed; there should be know errors once it is properly set up, but if you mess up the array of objects you pass into it then you may get javascript crashes. It is and "issue" but I don't think it is worth fixing.
- FireFox is (in this case) actually dumber than IE and the first version wasn't tracking coordinates correctly. The new version does. So enjoy!
- It only supports one mouse over pointer. I would like to make it a little more dynamic so you can choose both the starting and return pointer style (or possibly have it detect and automatically return to the correct pointer style).
You can grab the code here: