Friday, January 9, 2009

jQuery and HTML image maps

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.

9 comments:

  1. Pop stars in that era - lol. So true!

    ReplyDelete
  2. thanks for the post. So sad that a site that was just built for us this past month uses an image map... :(

    ReplyDelete
  3. Andrea 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.

    ReplyDelete
  4. check this out http://code.google.com/p/imagemap/

    ReplyDelete
  5. I 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/

    ReplyDelete
  6. I recently had to re-work an image map. Went for a relative mouse-position model using jquery. Much nicer!

    ReplyDelete
  7. Tnx a lot for the code!

    ReplyDelete
  8. Hi, I was looking how can I select an image area from link....
    thanks

    ReplyDelete
  9. does anyone know how to disable the hotspot once it has been clicked? my image map code is this

    area shape="rect" coords="297,81,318,94" nohref onClick="randomString(); this.disabled=true" alt=""

    ReplyDelete