लोड हो रहा है...

HTML इमेज मैप

Picture एलिमेंट अलग-अलग इमेज फ़ाइलों में से चुनता है। एक इमेज मैप एक ही इमेज रखता है और उसके क्षेत्रों को क्लिक करने योग्य बनाता है — फ़्लोर प्लान, डायग्राम या सरल ग्राफ़िक मेनू पर हॉटस्पॉट। आप एक img जिसमें usemap हो, उसे <area> लिंकों से भरे <map> से जोड़ते हैं।

इमेज मैप क्या है

इमेज मैप कोई अलग इमेज फ़ॉर्मैट नहीं है। यह HTML है जो कहता है: «चित्र पर यह आयत (या वृत्त, या बहुभुज) लिंक की तरह व्यवहार करे।» दृष्टि वाले उपयोगकर्ता ज़ोन पर क्लिक करते हैं; सहायक तकनीक को हर area पर स्पष्ट alt चाहिए क्योंकि हॉटस्पॉट के पास दृश्य टेक्स्ट न भी हो।

सीधा उत्तर

img पर usemap="#mapname" जोड़ें।
एक या अधिक <area> एलिमेंट के साथ <map name="mapname"> जोड़ें।
हर area को shape, coords, href और अपना alt चाहिए।
usemap पर # मैप के name से मेल खाना चाहिए (दूसरी वर्तनी गढ़े बिना)।

shape मान एक नज़र में

📊 area shape मान

shape	अर्थ
rect	आयत — coords: left, top, right, bottom
circle	वृत्त — coords: centerX, centerY, radius
poly	बहुभुज — क्रम में x,y बिंदुओं की सूची

एक सरल आयताकार मैप

डेस्क लेआउट पर दो हॉटस्पॉट वायरिंग सीखने के लिए पर्याप्त हैं: usemap, मेल खाता name, और ईमानदार alt टेक्स्ट वाले area आयत।

सरल आयताकार हॉटस्पॉट

html

HTML Code

<img src="images/desk.png" alt="Desk layout" usemap="#deskmap" width="400" height="200">
<map name="deskmap">
<area shape="rect" coords="20,30,120,100" href="lamp.html" alt="Lamp">
<area shape="rect" coords="200,40,320,120" href="monitor.html" alt="Monitor">
</map>

सैंपल पढ़ना

इमेज पर usemap="#deskmap" उस मैप की ओर इशारा करता है जिसका नाम deskmap है
हर area एक लिंक है: href गंतव्य है, alt हॉटस्पॉट का नाम बताता है
rect के लिए coords इमेज के पिक्सेल ग्रिड में left, top, right, bottom हैं
इमेज का अपना alt («Desk layout») पूरे ग्राफ़िक का वर्णन करता है; area के alt ज़ोन का नाम बताते हैं

निर्देशांक कैसे काम करते हैं

निर्देशांक मैप के लिए रखी गई इमेज के CSS पिक्सेल में मापे जाते हैं। अगर आप img पर width और height सेट करते हैं, सीखते समय coords को उसी प्रदर्शन आकार से सुसंगत रखें। गलत संख्याएँ ऐसे हॉटस्पॉट बनाती हैं जो खींची वस्तुओं से चूक जाते हैं — एक आम चुप विफलता।

पहुँच की आदतें

हर क्लिक करने योग्य area को अर्थपूर्ण alt चाहिए। हॉटस्पॉट बिना नाम न छोड़ें। ऐसी मैप पसंद करें जहाँ हर क्षेत्र का उद्देश्य स्पष्ट हो। अगर डिज़ाइन को जटिल रिस्पॉन्सिव व्यवहार चाहिए, कई टीमें नाज़ुक पिक्सेल मैप के बजाय लिंक वाले SVG या अलग बटन अपनाती हैं।

मैप कब मदद करती हैं — और कब नहीं

मैप एक डायग्राम पर कुछ स्थिर क्षेत्रों के लिए मददगार होती हैं। जब इमेज कई ब्रेकपॉइंट पर स्वतंत्र रूप से स्केल होती है तो वे असुविधाजनक हो जाती हैं, क्योंकि क्लासिक coords अपने आप फिर नहीं लिखे जाते। आधुनिक रिस्पॉन्सिव UI के लिए अलग लिंक्ड इमेज, CSS लेआउट या SVG पर विचार करें। फिर भी पुराने पेज या सरल शिक्षण डेमो मिलने पर इमेज मैप जानना मदद करता है।

circle और poly (संक्षिप्त नोट)

circle केंद्र और त्रिज्या उपयोग करता है। poly मुक्त आकार के चारों ओर x,y बिंदुओं के जोड़े सूचीबद्ध करता है। जब तक usemap / name जोड़ी स्वाभाविक न लगे, rect से शुरू करें, फिर अभ्यास ग्राफ़िक पर अन्य आकार आज़माएँ।

अपने एडिटर में अभ्यास

दो स्पष्ट क्षेत्रों वाली एक सरल चौड़ी इमेज उपयोग करें।
दो छोटी अभ्यास पेजों से लिंक करने वाले दो rect area के साथ एक map बनाएँ।
usemap="#name" को map name="name" से सावधानी से मिलाएँ (सहित #)।
हर क्षेत्र पर क्लिक करें और नेविगेशन पुष्टि करें।
एक बार नाम मिलान तोड़ें, मृत हॉटस्पॉट देखें, फिर ठीक करें।
किसी भी area का alt सुधारें जो केवल «link» कहता हो।

आसान गलतियाँ

बेमेल usemap / name (usemap पर # भूलना या केवल एक तरफ नाम बदलना)
हर area पर गायब alt
coords जो वास्तविक इमेज आकार या वस्तु स्थिति से मेल न खाएँ
बिना योजना के अत्यधिक तरल रिस्पॉन्सिव लेआउट के लिए इमेज मैप पर निर्भर रहना
पूरी विवरण केवल img पर रखना और area बिना लेबल छोड़ना

सारांश

इमेज मैप img + usemap + map + area को जोड़ती हैं
आकारों में rect, circle और poly शामिल हैं
हर area को href, alt, shape और coords चाहिए
नाम मिलाकर रखें और coords ईमानदार रखें
जटिल रिस्पॉन्सिव UI के लिए आधुनिक विकल्प सोचें — फिर भी विरासत और सरल डायग्राम के लिए मैप सीखें

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा