JavaScript（またはjQuery）を使用してクリックしたマップ（imageMap）の領域を確認する

Question

クライアント（HTML、JS/jQueryを使用）とCSSをクライアント用に作成しています）をマップに適用します。何らかの領域がクリックされたときに、アニメーションを含むアクションが実行された後、画像を変更すると、画像に変更が加えられます（おそらく、インターフェイス間を移動しているように見えます）。私は

クライアントがこのために頼ま

、などなど...

私は気づいた、私はそれは狂気のように思える知っているが、私はアニメーションを実行するために任意のモックアップツールを持っていない）<img>タグを言う必要がありますパターンと私は私のコードをリファクタリングすることができますので、拡張と維持が容易です。

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

それは面積がクリックされた場合は私のためにJavaScriptやjQueryのを使用して決定することが可能である：私は思っていたしかし、私は、次のHTMLを持っていると言いますか？それからIDを特定して正しい行動をとることができました。私が現在持っていることは、私は（IDを決定することにより）クリックされたエリアを知っていれば、私は一般的な関数に配列の値を適用するのではなくに結合することができますしかしそう...

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

のようなさまざまな条件がたくさんあります具体的にマップエリア。

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

しかし、これは問題ではありません、私のページ全体に影響を与えるだろうが、私はそれが動作しません知っている：

私はこのような何かをクリックしたかのIDを決定することができることを考えていました。

申し訳ありませんが私は自分自身をよく説明していないか、私の言葉が貧しいです。私は望むなら拡張したり、言い直したりすることができます。

おかげ

UPDATE

私は次のように使用して地図にIDを適用する場合、別のアプローチがありますID

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

Answer 1

を返します、これを解決しました。 私は最も簡単で、このものであろうと思います：イベントハンドラをアタッチするjQueryの1.7のように、.live（）メソッドは推奨されません、あなたは（.on使用する必要があること

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

注）：

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