Estoy escribiendo una maqueta (usando HTML, JS / jQuery) y CSS para un cliente que implica tener una sola imagen (de una interfaz) con un mapa aplicado. Por razones que no explicaré cuando se hace clic en un área determinada, se realiza una acción que incluye una animación y luego se cambia la imagen.src (Parece que se está moviendo entre interfaces) y luego aplico un mapa de imágenes diferente a la imagen (tal vez debería decir<img> etiqueta)

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

He notado 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, digamos que tengo el siguiente 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>

¿Es posible para mí determinar el uso de JavaScript o jQuery si se hizo clic en un área? Entonces pude identificar la ID y realizar las acciones correctas. Lo que tengo actualmente es un montón de condiciones diferentes como ...

 $("#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é en qué área se hizo clic (al determinar el ID), puedo aplicar valores de matriz en una función genérica en lugar de vincularlos específicamente a las áreas del mapa.

Estaba pensando que podría determinar la identificación de lo que se hizo clic en algo como esto:

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

Sin embargo, esto afectará a toda mi página, lo cual no es un problema, pero sé que no funcionará.

Lo siento si no me he explicado bien o mis palabras son malas. Puedo extender o reformular si lo desea.

Gracias

ACTUALIZAR

Resolví esto, si aplico una ID al mapa usando lo siguiente, devolveré la ID

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