title: Determine which Area in a Map (imageMap) was clicked using JavaScript (or jQuery)
body: <p>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 <code>src</code> (so it looks like it is moving between interfaces) and then I apply a different imagemap to the image (perhaps I should say <code>&lt;img&gt;</code> tag)</p>
  
  <p>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...</p>
  
  <p>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: </p>
  
  <pre><code>&lt;img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage"&gt;
      &lt;map name="claas_ipad3"&gt;
        &lt;area shape="rect" coords="181,249,255,341" href=""  alt="" id="Contacts"&gt;
        &lt;area shape="rect" coords="345,251,454,341" href=""  alt="" id="Appointments"&gt;
        &lt;area shape="rect" coords="533,256,576,311" href=""  alt="" id="Maps"&gt;
        &lt;area shape="rect" coords="686,255,785,344" href=""  alt="" id="Tasks"&gt;
        &lt;area shape="rect" coords="835,246,973,348" href=""  alt="" id="Products"&gt;
        &lt;area shape="rect" coords="176,412,278,513" href=""  alt="" id="Reports"&gt;
        &lt;area shape="rect" coords="330,411,457,513" href=""  alt="" id="PriceTable"&gt;
        &lt;area shape="rect" coords="502,399,637,518" href=""  alt="" id="SalesCycle"&gt;
        &lt;area shape="rect" coords="677,398,808,519" href=""  alt="" id="MetaData"&gt;
        &lt;area shape="rect" coords="844,408,970,510" href=""  alt="" id="Settings"&gt;
        &lt;area shape="rect" coords="173,545,283,662" href=""  alt="" id="Vids"&gt;
        &lt;area shape="rect" coords="328,558,461,652" href=""  alt="" id="Web"&gt;
        &lt;area shape="rect" coords="491,559,626,666" href=""  alt="" id="Files"&gt;
      &lt;/map&gt;
  </code></pre>
  
  <p>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...</p>
  
  <pre><code> $("#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');
                      }
                      });
                  });
              });
  </code></pre>
  
  <p>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.</p>
  
  <p>I was thinking I could determine the id of what was clicked something like this:</p>
  
  <pre><code>$(this).live('click', function () {
      alert($(this).attr('id')); 
  });
  </code></pre>
  
  <p>however this will affect my whole page, which isn't a problem but I know it won't work. </p>
  
  <p>Sorry if I haven't explained myself well or my wording is poor. I can extend or reword if desired. </p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have solved this, if I apply an ID to the Map using the following will return the ID</p>
  
  <pre><code> $("#Map1 area").click( function () {
          alert($(this).attr('id')); // this
      });
  </code></pre>