Determine en qué área de un mapa (mapa de imágenes) se hizo clic usando JavaScript (o jQuery)

Question

Escribo un simulacro (usando HTML, JS/jQuery) y CSS para un cliente que implica tener una sola imagen (de una interfaz) con un mapa aplicado a él. Por razones que no explicaré cuando se hace clic en un área determinada, se realiza una acción que incluye una animación, luego cambiando la imagen src (por lo que parece que se mueve entre las interfaces) y luego aplico un mapa de imagen diferente a la imagen (quizás debería decir <img> etiqueta)

El cliente pidió esto, sé que parece una locura, pero no tengo ninguna herramienta maqueta para realizar las animaciones, etc, etc ...

me he dado cuenta un patrón y podría refactorizar mi código para que sea más fácil de extender y mantener. Sin embargo, me preguntaba, decir que tengo el código HTML siguiente:

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

¿Es posible para mí para determinar el uso de JavaScript jQuery o si se hace clic en un área? Entonces podría identificar la identificación y realizar las acciones correctas. Actualmente lo que tengo es una gran cantidad de diferentes condiciones como así ...

$("#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'); 
        } 
        }); 
       }); 
      }); 

Sin embargo si sé qué área se ha hecho clic (determinando el id) puedo aplicar valores de la matriz en una función genérica en lugar de unirse a la áreas del mapa específicamente.

Estaba pensando que podría determinar la identificación de lo que se ha hecho clic o menos así:

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

sin embargo, esto afectará a mi página entera, que no es un problema, pero sé que no va a funcionar.

Lo siento si no me he explicado bien o mi redacción es pobre. Puedo extender o volver a redactar si lo desea.

Gracias

ACTUALIZACIÓN

He resuelto esto, si aplico una identificación para el Mapa usando la siguiente devolverá el ID

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

Answer 1

Existen diferentes enfoques. supongo que lo más fácil sería éste:

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

Nota que a partir de jQuery 1.7, el .live() es obsoleta y se debe utilizar .on() para asociar controladores de eventos:

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