Jquery - Smooth/Fade Image Source Swap on imagemap? -

मैं निम्नलिखित कोड का उपयोग कर रहा हूं:

-Jquery:

   
 इस HTML पर:  
  & lt; nav & gt; & Lt; img id = "menu_img" src = "images / menu / menu_00.gif" alt = "नेविगेशन मेनू" चौड़ाई = "450" ​​height = "900" usemap = "# map" class = "centerimg" डेटा-मेनू- src = "छवियों / मेनू / menu_00.gif" & gt; & Lt; नक्शा नाम = "मानचित्र" वर्ग = "मुख्य नाम" & gt; & Lt; क्षेत्र वर्ग = "एक" आकार = "रीकट" कॉर्ड = "55,26,26 9,69" href = "# कथन" डेटा-मेनू- src = "चित्र / मेनू / मेनू_01.gif" & gt; & Lt; क्षेत्र वर्ग = "दो" आकार = "रीकट" कॉओज = "234,112,361,159" href = "# कौशल" डेटा-मेनू- src = "चित्र / मेनू / मेनूई_02.gif" & gt; & Lt; क्षेत्रीय वर्ग = "तीन" आकार = "रीकट" कोर्ड्स = "12 9, 213,33 9,256" href = "# शिक्षा" डेटा-मेनू- src = "चित्र / मेनू / मेनू_03.gif" & gt; & Lt; क्षेत्र वर्ग = "चार" आकार = "रीक्टीट" कॉर्ड = "122,332,370,378" href = "# अनुभव" डेटा-मेनू- src = "चित्र / मेनू / मेनू_04.gif" & gt; & Lt; क्षेत्र वर्ग = "पांच" आकार = "रीक्टीट" कॉर्ड = "203,444,391,495" href = "# पोर्टफोलियो" डेटा-मेनू- src = "चित्र / मेनू / मेनू_05.gif" & gt; & Lt; क्षेत्र वर्ग = "छः" आकार = "रीकट" कॉओज = "163,550,323,592" href = "# संपर्क" डेटा-मेनू- src = "चित्र / मेनू / मेनू_06.gif" & gt; & Lt; क्षेत्र वर्ग = "सात" आकार = "रीकटक" कॉओज = "4,688,436,833" href = "# होम" डेटा-मेनू- src = "चित्र / मेनू / मेनू_07.gif" & gt; & Lt; / नक्शा & gt; & Lt; / नव & gt;   
 यह विचार है कि छविमैप क्षेत्र पर मँडरा छवि के स्रोत को स्विच करता है। वह हिस्सा सिर्फ ठीक काम करता है। मैं क्या सोच रहा हूं, मैं इस संक्रमण को चिकनी या माउसएन्टर / माउसलेव पर तुरंत कैसे होने की बजाय कैसे बना सकता / सकती हूं, मैं पुराने स्रोतों में लुप्त होकर नए स्रोतों में फीका पड़ सकता हूं? क्या यह भी संभव है? मेरे सारे इमेज फ़ेड्स के लिए मुझे एक दूसरे के ऊपर छवियों को ढेर करने की आवश्यकता है, और फिर अस्पष्टता को एनिमेट करने की आवश्यकता है, जिसे मैं बचाना चाहता हूं क्योंकि चित्रों में से बहुत से हैं क्या एक और हल है, अधिमानतः मेरे पास पहले से उपयोग किए गए कोड का उपयोग करना है? यदि नहीं, तो इस को लागू करने के लिए सबसे चतुर (या चालाक) तरीका क्या होगा?   
 
 
 इसे आज़माएं -  
  $ ("map.mainnav क्षेत्र") .on ("mouseenter", फ़ंक्शन () {$ ("# menu_img")। Hide ()। Attr ("src", $ ( यह) .डेटा ("मेनू- src"))। रोक ()। FadeIn (200);}) .on ("mouseleave", फ़ंक्शन () {$ ("# menu_img")। Hide ()। Attr (" Src ", $ (" # menu_img ") डेटा (" मेनू- src "))। रोक ()। FadeIn (200);}); });