Most of us don't even use image maps anymore. But occasionally, mostly when freelancing, you will need to work with the pages that were created in mid 90's and image maps where pop stars in that era. Anyway to refresh your memory here is how HTML image map looks like:
<img src="bigImage.gif" usemap="#parts" /> <map name="parts"> <area shape="rect" coords="20,6,200,60" href="http://www.boo.uz"> <area shape="circle" coords="100,200,50" href="http://www.google.com"> </map>
To access HTML image map area attributes and properties use something like this:
$('area').click(function() { var url = $(this).attr('href'); var coords = $(this).attr('coords').split(','); // Your code here // To prevent default action return false; });
This is all that I have on jQuery and image maps.
Pop stars in that era - lol. So true!
ReplyDeletethanks for the post. So sad that a site that was just built for us this past month uses an image map... :(
ReplyDeleteAndrea Hill, why is that sad? Image Maps rocked in the 90s and still rock in various cases -- they rock any Flash-enabled map, I'll tell ya that.
ReplyDeletecheck this out http://code.google.com/p/imagemap/
ReplyDeleteI recently needed to implement a HTML Image Map on a project. It was an interesting trip down memory lane using HTML, CSS & JQuery. I wrote a little article about it: http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/
ReplyDeleteI recently had to re-work an image map. Went for a relative mouse-position model using jquery. Much nicer!
ReplyDeleteTnx a lot for the code!
ReplyDeleteHi, I was looking how can I select an image area from link....
ReplyDeletethanks
does anyone know how to disable the hotspot once it has been clicked? my image map code is this
ReplyDeletearea shape="rect" coords="297,81,318,94" nohref onClick="randomString(); this.disabled=true" alt=""