HTML छवि मानचित्र
HTML छवि मानचित्रों के साथ, आप किसी छवि पर क्लिक करने योग्य क्षेत्र बना सकते हैं।
छवि मानचित्र
HTML <map>टैग एक छवि मानचित्र को परिभाषित करता है। एक छवि मानचित्र क्लिक करने योग्य क्षेत्रों वाली एक छवि है। क्षेत्रों को एक या अधिक <area>टैग के साथ परिभाषित किया गया है।
नीचे दी गई छवि में कंप्यूटर, फोन या कॉफी के कप पर क्लिक करने का प्रयास करें:
उदाहरण
यहाँ ऊपर छवि मानचित्र के लिए HTML स्रोत कोड है:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
यह कैसे काम करता है?
एक छवि मानचित्र के पीछे का विचार यह है कि आप जिस छवि पर क्लिक करते हैं, उसके आधार पर आपको विभिन्न क्रियाएं करने में सक्षम होना चाहिए।
एक छवि मानचित्र बनाने के लिए आपको एक छवि और कुछ HTML कोड की आवश्यकता होती है जो क्लिक करने योग्य क्षेत्रों का वर्णन करता है।
छवि
<img>छवि टैग का उपयोग करके डाली गई है । अन्य छवियों से एकमात्र अंतर यह है कि आपको एक usemapविशेषता जोड़नी होगी:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
मान एक usemapहैश टैग से शुरू होता है
#जिसके बाद छवि मानचित्र का नाम आता है, और छवि और छवि मानचित्र के बीच संबंध बनाने के लिए इसका उपयोग किया जाता है।
युक्ति: आप छवि मानचित्र के रूप में किसी भी छवि का उपयोग कर सकते हैं!
छवि मानचित्र बनाएं
फिर, एक <map>तत्व जोड़ें।
तत्व का उपयोग छवि मानचित्र बनाने के लिए किया जाता है, और आवश्यक
विशेषता <map>का उपयोग करके छवि से जुड़ा होता है :name
<map name="workmap">
nameविशेषता का वही मान होना चाहिए जो की
विशेषता <img>का usemapहै।
इलाके
फिर, क्लिक करने योग्य क्षेत्र जोड़ें।
<area>एक क्लिक करने योग्य क्षेत्र को एक तत्व का उपयोग करके परिभाषित किया गया है।
आकार
आपको क्लिक करने योग्य क्षेत्र के आकार को परिभाषित करना होगा, और आप इनमें से कोई एक मान चुन सकते हैं:
rect- एक आयताकार क्षेत्र को परिभाषित करता हैcircle- एक वृत्ताकार क्षेत्र को परिभाषित करता हैpoly- एक बहुभुज क्षेत्र को परिभाषित करता हैdefault- पूरे क्षेत्र को परिभाषित करता है
छवि पर क्लिक करने योग्य क्षेत्र को रखने में सक्षम होने के लिए आपको कुछ निर्देशांक भी परिभाषित करने होंगे।
आकार = "रेक्ट"
निर्देशांक shape="rect"जोड़े में आते हैं, एक x-अक्ष के लिए और एक y-अक्ष के लिए।
तो, निर्देशांक 34,44बाएं हाशिये से 34 पिक्सेल और ऊपर से 44 पिक्सेल स्थित हैं:
निर्देशांक 270,350बाएं हाशिये से 270 पिक्सेल और ऊपर से 350 पिक्सेल स्थित हैं:
अब हमारे पास क्लिक करने योग्य आयताकार क्षेत्र बनाने के लिए पर्याप्त डेटा है:
उदाहरण
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
यह वह क्षेत्र है जो क्लिक करने योग्य हो जाता है और उपयोगकर्ता को "कंप्यूटर.एचटीएम" पृष्ठ पर भेज देगा:
आकार = "सर्कल"
एक वृत्त क्षेत्र जोड़ने के लिए, पहले वृत्त के केंद्र के निर्देशांक खोजें:
337,300
फिर वृत्त की त्रिज्या निर्दिष्ट करें:
44 पिक्सल
अब आपके पास क्लिक करने योग्य वृत्ताकार क्षेत्र बनाने के लिए पर्याप्त डेटा है:
उदाहरण
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
यह वह क्षेत्र है जो क्लिक करने योग्य हो जाता है और उपयोगकर्ता को "coffee.htm" पृष्ठ पर भेज देगा:
आकार = "पाली"
इसमें shape="poly"कई समन्वय बिंदु होते हैं, जो सीधी रेखाओं (बहुभुज) से बनी आकृति बनाता है।
इसका उपयोग किसी भी आकार को बनाने के लिए किया जा सकता है।
शायद एक क्रोइसैन आकार की तरह!
हम नीचे दी गई छवि में क्रोइसैन को क्लिक करने योग्य लिंक कैसे बना सकते हैं?
हमें क्रोइसैन के सभी किनारों के लिए x और y निर्देशांक खोजने होंगे:
निर्देशांक जोड़े में आते हैं, एक x-अक्ष के लिए और एक y-अक्ष के लिए:
उदाहरण
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
यह वह क्षेत्र है जो क्लिक करने योग्य हो जाता है और उपयोगकर्ता को "croissant.htm" पृष्ठ पर भेज देगा:
छवि मानचित्र और जावास्क्रिप्ट
एक क्लिक करने योग्य क्षेत्र जावास्क्रिप्ट फ़ंक्शन को भी ट्रिगर कर सकता है।
जावास्क्रिप्ट फ़ंक्शन को निष्पादित clickकरने के लिए तत्व में एक ईवेंट जोड़ें :<area>
उदाहरण
यहां, जब क्षेत्र पर क्लिक किया जाता है, तो हम जावास्क्रिप्ट फ़ंक्शन को निष्पादित करने के लिए ऑनक्लिक विशेषता का उपयोग करते हैं:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
अध्याय का सारांश
<map>छवि मानचित्र को परिभाषित करने के लिए HTML तत्व का उपयोग करें- छवि मानचित्र में क्लिक करने योग्य क्षेत्रों को परिभाषित करने के लिए HTML
<area>तत्व का उपयोग करें - छवि मानचित्र को इंगित करने के लिए तत्व की HTML
usemapविशेषता का उपयोग करें<img>
एचटीएमएल छवि टैग
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।