Bestimmen Sie, welche Fläche in einer Karte (imagemap) wurde mit JavaScript geklickt (oder jQuery)

Question

Ich schreibe eine Mock-up (mit HTML, JS/jQuery) und CSS für einen Client, der ein einzelnes Bild (eine Schnittstelle beinhaltet, die) mit einer zugewiesenen Map. Aus Gründen, die ich nicht erklären, wenn ein bestimmte Bereich eine Aktion geklickt wird durchgeführt, die eine Animation enthält, dann das Bild zu ändern src (so sieht es aus wie es zwischen den Schnittstellen bewegt) und dann wende ich einen anderen imagemap zum Bild (vielleicht ich soll sagen, <img> tag)

Der Kunde darum gebeten, ich weiß es, wie Wahnsinn scheint, aber ich habe keine Mock-up-Tools, die Animationen ausführen, etc, etc ...

ich habe bemerkt, ein Muster und ich könnte meinen Code umgestalten, so dass es einfacher zu erweitern und zu pflegen ist. Aber ich frage mich, sage ich den folgenden HTML haben:

<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> 

Ist es möglich für mich, mit JavaScript oder jQuery, um zu bestimmen, ob ein Bereich geklickt wurde? Dann konnte ich die ID identifizieren und die richtigen Aktionen ausführen. Was ich zur Zeit habe, ist eine Menge von verschiedenen Bedingungen wie 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'); 
        } 
        }); 
       }); 
      }); 

Allerdings, wenn ich weiß, welcher Bereich geklickt wurde (durch die ID Bestimmung) I Array-Werte in eine generische Funktion anwenden kann und nicht auf die Bindung Kartenbereiche spezifisch.

Ich dachte, ich könnte die ID bestimmen, was so etwas wie diese geklickt wurde:

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

aber das ist meine ganze Seite auswirken wird, was aber kein Problem ist, aber ich weiß, es wird nicht funktionieren.

Sorry, wenn ich nicht erklärt habe mich gut oder meine Formulierung ist schlecht. Ich kann erweitern oder umschreiben, wenn gewünscht.

Dank

UPDATE

ich diese gelöst haben, wenn ich eine ID auf die Karte unter Verwendung der folgenden gelten die ID

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

Answer 1

Es gibt verschiedene Ansätze zurück. Ich denke, die einfachste dies wäre ein:

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

Beachten Sie, dass wie von jQuery 1.7, die .live() Methode ist veraltet und Sie sollten .on() verwenden, um Event-Handler anhängen:

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