Determine which Area in a Map (imageMap) was clicked using JavaScript (or jQuery)

Question

I'm writing a mock up (using HTML, JS/jQuery) and CSS for a client which involves having a single image (of an interface) with an Map applied to it. For reasons I won't explain when a certain area is clicked an action is performed which includes an animation, then changing the image src (so it looks like it is moving between interfaces) and then I apply a different imagemap to the image (perhaps I should say <img> tag)

The client asked for this, I know it seems like madness but I don't have any mockup tools to perform the animations, etc, etc...

I've noticed a pattern and I could refactor my code so it is easier to extend and maintain. However I was wondering, say I have the following HTML:

<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
    <map name="claas_ipad3">
      <area shape="rect" coords="181,249,255,341" href=""  alt="" id="Contacts">
      <area shape="rect" coords="345,251,454,341" href=""  alt="" id="Appointments">
      <area shape="rect" coords="533,256,576,311" href=""  alt="" id="Maps">
      <area shape="rect" coords="686,255,785,344" href=""  alt="" id="Tasks">
      <area shape="rect" coords="835,246,973,348" href=""  alt="" id="Products">
      <area shape="rect" coords="176,412,278,513" href=""  alt="" id="Reports">
      <area shape="rect" coords="330,411,457,513" href=""  alt="" id="PriceTable">
      <area shape="rect" coords="502,399,637,518" href=""  alt="" id="SalesCycle">
      <area shape="rect" coords="677,398,808,519" href=""  alt="" id="MetaData">
      <area shape="rect" coords="844,408,970,510" href=""  alt="" id="Settings">
      <area shape="rect" coords="173,545,283,662" href=""  alt="" id="Vids">
      <area shape="rect" coords="328,558,461,652" href=""  alt="" id="Web">
      <area shape="rect" coords="491,559,626,666" href=""  alt="" id="Files">
    </map>

Is it possible for me to determine using JavaScript or jQuery if an area was clicked? Then I could identify the ID and perform the correct actions. What I currently have is a lot of different conditions like so...

 $("#Contacts").click(function(event){
            event.preventDefault();

            // okay lets show the contacts interface
            $("#mainPage").fadeOut(300, function(){
                $(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
                    if (this.complete){
                        $(this).fadeIn(300);
                        $(this).attr('USEMAP','#claas_ipad_1');
                    }
                    });
                });
            });

However if I know which area was clicked (by determining the id) I can apply array values into a generic function rather than binding to the map areas specifically.

I was thinking I could determine the id of what was clicked something like this:

$(this).live('click', function () {
    alert($(this).attr('id')); 
});

however this will affect my whole page, which isn't a problem but I know it won't work.

Sorry if I haven't explained myself well or my wording is poor. I can extend or reword if desired.

Thanks

UPDATE

I have solved this, if I apply an ID to the Map using the following will return the ID

 $("#Map1 area").click( function () {
        alert($(this).attr('id')); // this
    });

Answer 1

There are different approaches. I guess the easiest would be this one:

$("map[name=claas_ipad3] area").live('click', function () {
    alert($(this).attr('id')); 
});

Note that as of jQuery 1.7, the .live() method is deprecated and you should use .on() to attach event handlers:

$("map[name=claas_ipad3] area").on('click', function () {
    alert($(this).attr('id')); 
});