Déterminer la Zone dans une Carte (image map) a été cliqué à l'aide de JavaScript (jQuery)

Je suis en train d'écrire une maquette (à l'aide de HTML, JS/jQuery) et CSS pour un client ce qui implique d'avoir une seule image (de l'interface) avec une Carte qui lui est appliqué. Pour des raisons que je n'expliquerai pas quand une certaine zone de clic est effectué sur une action qui comprend une animation, la modification de l'image src (donc, on dirait que c'est le déplacement entre les interfaces) et j'applique ensuite une autre image map à l'image (peut-être devrais-je dire <img> tag)

Le client a demandé pour cela, je sais que cela semble comme la folie, mais je n'ai pas de maquette outils pour effectuer des animations, etc, etc...

J'ai remarqué un modèle et j'ai pu refactoriser mon code de sorte qu'il est plus facile de les étendre et de les maintenir. Cependant, je me demandais, dis-je avoir le code HTML suivant:

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

Est-il possible pour moi de déterminer à l'aide de JavaScript ou jQuery si une zone a été cliqué? Ensuite, j'ai pu identifier l'ID et effectuer les actions appropriées. Ce que j'ai actuellement est beaucoup de différentes conditions comme si...

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

Cependant si je sais que la zone a été cliqué (par détermination de l'id), je lui applique un tableau de valeurs d'une fonction générique plutôt que la liaison à la carte des zones en particulier.

Je pensais que je pouvais déterminer l'id de ce qui a été cliqué quelque chose comme ceci:

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

cependant cela va affecter l'ensemble de ma page, ce qui n'est pas un problème mais je sais que ça ne marchera pas.

Désolé si je n'ai pas expliqué moi-même bien ou ma formulation est mauvaise. Je peux prolonger ou de reformuler si vous le souhaitez.

Grâce

Mise à JOUR

J'ai résolu ce problème, si je demande un ID de la Carte à l'aide de la liste suivante sera de retour l'ID

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

OriginalL'auteur Mike Sav | 2012-06-11