निर्धारित करें कि मानचित्र में कौन सा क्षेत्र (छवि मैप) जावास्क्रिप्ट (या jQuery)

Question

का उपयोग करके क्लिक किया गया था, मैं एक क्लाइंट के लिए एक नकली (HTML, JS/jQuery का उपयोग कर) और सीएसएस लिख रहा हूं जिसमें एक छवि (इंटरफ़ेस का) शामिल है) एक मानचित्र के साथ लागू किया। कारणों से मैं समझाऊंगा कि जब कोई निश्चित क्षेत्र क्लिक किया जाता है तो एक क्रिया निष्पादित की जाती है जिसमें एक एनीमेशन शामिल होता है, फिर छवि src बदलती है (इसलिए ऐसा लगता है कि यह इंटरफेस के बीच चल रहा है) और फिर मैं छवि पर एक अलग छविमैप लागू करता हूं (शायद मैं कहना चाहिए <img> टैग)

ग्राहक इस के लिए कहा, मुझे पता है यह पागलपन की तरह लगता है, लेकिन मैं एनिमेशन के प्रदर्शन में कोई mockup उपकरण की जरूरत नहीं है, आदि, आदि ...

मैंने देखा है एक पैटर्न और मैं अपने कोड को दोबारा कर सकता हूं ताकि विस्तार और रखरखाव करना आसान हो।

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

यह मेरे लिए जावास्क्रिप्ट या jQuery का उपयोग कर निर्धारित करने के लिए एक क्षेत्र पर क्लिक किया गया हो सकता है: हालांकि मैं सोच रहा था, मैं निम्न HTML है कहते हैं? तब मैं आईडी की पहचान कर सकता हूं और सही कार्य कर सकता हूं। क्या मैं वर्तमान में है, इसलिए की तरह अलग अलग स्थितियों का एक बहुत

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

लेकिन इस मेरे पूरे पृष्ठ पर, जो एक समस्या नहीं है को प्रभावित करेगा, लेकिन मैं जानता हूँ कि यह काम नहीं करेगा।

क्षमा करें अगर मैंने खुद को अच्छी तरह से समझाया नहीं है या मेरा शब्द खराब है। वांछित अगर मैं विस्तार या reword कर सकते हैं।

धन्यवाद

अद्यतन

मैं इस समाधान कर लिया है, अगर मैं निम्नलिखित का उपयोग कर आईडी

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

Answer 1

अलग दृष्टिकोण हैं वापस आ जाएगी मानचित्र के लिए एक आईडी लागू होते हैं। मुझे लगता है कि सबसे आसान होगा यह एक:

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

ध्यान दें कि jQuery 1.7 के रूप में, .live() विधि बहिष्कृत है और आप) .on का उपयोग करना चाहिए (ईवेंट हैंडलर्स संलग्न करने के लिए:

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