HTML <img> usemap गुण

HTML <img> टैग

परिभाषा और उपयोग

usemap गुण इमेज को क्लायंट इमेज मैपिंग के रूप में परिभाषित करता है.

इमेज मैपिंग एक क्लिक करने वाले क्षेत्र वाली इमेज है.

usemap गुण के साथ <map> एलीमेंट का name या id गुण से संबंधित है, ताकि <img> और <map> के बीच संबंध स्थापित किया जा सके.

ध्यान:यदि <img> एलीमेंट <a> या <button> एलीमेंट का संतान है, तो इस्तेमाल नहीं किया जा सकता है usemap गुण.

आगे पढ़ें: usemap अट्रिब्यूट का विस्तार

उदाहरण

क्लिक करने वाले क्षेत्र के साथ इमेज मैपिंग:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

स्वयं को प्रयोग करें

व्याकरण

<img usemap="#mapname">

अट्रिब्यूट मूल्य

मूल्य वर्णन
#mapname शंकु चिह्न ("#") और उपयोग के लिए <map> एलीमेंट का नाम जोड़ें।

आगे पढ़ें: usemap अट्रिब्यूट का विस्तार

usemap प्रतियोगिता एक 'क्लायंट' इमेज़ मैपिंग मैकेनिज्म प्रदान करती है, जो सर्वर के लिए माउस कोण के संभाल को और इससे उठती नेटवर्क देरी के समस्या को पूरी तरह से नष्ट करती है। विशेष <map> और <area> टैग के माध्यम से, HTML निर्माता एक usemap इमेज़ में सुसंबंधित क्षेत्रों के कोण के मैपिंग प्रदान कर सकते हैं, जिसमें सुसंबंधित अलग-अलग लिंक यूआरएल भी शामिल हैं। usemap अट्रिब्यूट का मूल्य एक यूआरएल है, जो विशेष <map> क्षेत्र की ओर पुंजीयता करता है। उपयोगकर्ता के कंप्यूटर पर ब्राउज़र इमेज़ पर माउस क्लिक करने के समय कोण को विशेष कार्यों में परिवर्तित करेगा, जिसमें एक अन्य दस्तावेज़ को लोड और दिखाना शामिल है।

हम एक उदाहरण दें, नीचे दिए गए स्रोत कोड 100x100 पिक्सल के एक इमेज map.gif को 4 क्षेत्रों में मैप करता है, जब उपयोगकर्ता किसी भी क्षेत्र पर क्लिक करता है, तो उसे अलग-अलग दस्तावेज़ों में लिंक कर दिया जाता है। कृपया ध्यान दें कि इस <img> टैग में, हमने ismap इमेज़ मैपिंग के लिए प्रभावी रूप से ismap इमेज़ मैपिंग की सुविधा समाहित की है, इस प्रकार, usemap ट्रीटमेंट नहीं रखने वाले ब्राउज़र के उपयोगकर्ताओं के लिए, इसका एक अन्य रास्ता, यथा सर्वर साइड मैकेनिज्म के माध्यम से इमेज़ मैपिंग का संभाल करने की सुविधा दी गई है:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

ismap और usemap अभियान के उपयोग के अंतर

मानचित्र इसमें ismap और usemap अभियान का उपयोग करने के एक अच्छा उदाहरण है, जैसे, एक राष्ट्रव्यापी बड़ी कंपनी के वेबपेज को ब्राउज़ करते समय, उपयोगकर्ता अपने निवास स्थान के शहर पर मानचित्र पर क्लिक कर सकते हैं, ताकि आस-पास के रिटेल स्टोर के पते और फोन नंबर जैसी जानकारी प्राप्त कर सकें।

usemap क्लायंट सेप्रेसिंग इमेज मैपिंग के लाभ है, यह ismap सिस्टम से अलग, यह गैर-वेब (बिना नेटवर्क) इकाई में उपयोग किया जा सकता है, जैसे स्थानीय फ़ाइल या CD-ROM में इस्तेमाल किया जा सकता है।

ब्राउज़र समर्थन

च्रोम एज फायरफॉक्स सैफारी ओपेरा
च्रोम एज फायरफॉक्स सैफारी ओपेरा
सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट

HTML <img> टैग