Eu estou escrevendo um mock up (usando HTML, JS / jQuery) e CSS para um cliente que envolve ter uma única imagem (de uma interface) com um mapa aplicado a ele. Por razões que não vou explicar quando uma determinada área é clicada, é executada uma ação que inclui uma animação e depois muda a imagemsrc (então parece que está se movendo entre interfaces) e então eu aplico um imagemap diferente para a imagem (talvez eu deva dizer<img> tag)

O cliente pediu isso, eu sei que parece loucura, mas eu não tenho nenhuma ferramenta de maquete para executar as animações, etc, etc ...

Eu observei um padrão e consegui refatorar meu código para facilitar a extensão e a manutenção. No entanto, eu queria saber, digamos que eu tenho o seguinte 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>

É possível para mim determinar usando JavaScript ou jQuery se uma área foi clicada? Então eu pude identificar o ID e executar as ações corretas. O que eu tenho atualmente é um monte de condições diferentes, como assim ...

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

No entanto, se eu souber qual área foi clicada (determinando o id), posso aplicar valores de matriz em uma função genérica, em vez de vincular especificamente as áreas do mapa.

Eu estava pensando que eu poderia determinar o id do que foi clicado algo assim:

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

No entanto, isso afetará toda a minha página, o que não é um problema, mas sei que não funcionará.

Desculpe se não me expliquei bem ou se meu texto é ruim. Eu posso estender ou reformular, se desejar.

obrigado

ATUALIZAR

Eu tenho resolvido isso, se eu aplicar um ID para o mapa usando o seguinte irá retornar o ID

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