HTML Image Maps - Jassif Team

HTML छवि मानचित्र

आप किसी छवि के क्लिक करने योग्य भाग बनाने के लिए HTML छवि मानचित्र का उपयोग कर सकते हैं।

🗺️छवि मानचित्र क्या हैं?

एक छवि मानचित्र क्लिक करने योग्य भागों वाली एक छवि है। इन क्षेत्रों को एक या अधिक <क्षेत्र> टैग द्वारा परिभाषित किया गया है।

चित्र 1: मूल छवि मानचित्र उदाहरण (img2.png)

छवि मानचित्र कैसे काम करते हैं?

छवि मानचित्र के पीछे का विचार यह है कि आप छवि पर कहां क्लिक करते हैं, इसके आधार पर विभिन्न क्रियाएं की जाती हैं।

एक छवि मानचित्र बनाने के लिए, आपको एक छवि और कुछ HTML कोड की आवश्यकता होती है जो क्लिक करने योग्य भागों का वर्णन करता है।

चित्र 2: कंप्यूटर, फ़ोन, कॉफ़ी कप - क्लिक करने योग्य भाग (img3.png)

उदाहरण कोड

उपरोक्त छवि मानचित्र के लिए HTML स्रोत कोड:

HTML Code

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

चित्र 3: HTML कोड की संरचना (img4.png)

आकृति प्रकार

आपको क्लिक करने योग्य भाग का आकार परिभाषित करना होगा, और आप इनमें से कोई एक मान चुन सकते हैं:

rect

एक आयत को परिभाषित करता है

circle

एक वृत्ताकार खंड को परिभाषित करता है

poly

बहुभुज खंड को परिभाषित करता है

default

संपूर्ण भाग को परिभाषित करता है

प्रारूप = "रेक्ट" (आयत)

आकार='रेक्ट' के निर्देशांक जोड़े में आते हैं, एक x-अक्ष के लिए और एक y-अक्ष के लिए।

चित्र 4: आयत के लिए निर्देशांक (img5.png)

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

प्रारूप = "सर्कल"

सबसे पहले वृत्त के केंद्र के निर्देशांक ज्ञात करें:

चित्र 5: गोलाकार आकृति के लिए निर्देशांक (img6.png)

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

आकार = "पाली" (बहुभुज)

आकार = "पॉली" में कई समन्वय बिंदु होते हैं, जो सीधी रेखाओं द्वारा बनाई गई आकृति बनाते हैं।

चित्र 6: बहुभुज आकार उदाहरण (img7.png)

छवि मानचित्र और जावास्क्रिप्ट

क्लिक करने योग्य भाग एक जावास्क्रिप्ट फ़ंक्शन को भी ट्रिगर करेगा।

क्षेत्र पर क्लिक होने पर जावास्क्रिप्ट फ़ंक्शन निष्पादित करने के लिए <क्षेत्र> तत्व में एक क्लिक इवेंट जोड़ें:

JavaScript Example

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

चित्र 7: जावास्क्रिप्ट के साथ एकीकरण (img8.png)

अध्याय का सारांश

चित्र 8: छवि ग्राफ़ सिद्धांत का सारांश (img9.png)

छवि मानचित्र को परिभाषित करने के लिए HTML <map> तत्व का उपयोग करें
छवि मानचित्र के क्लिक करने योग्य क्षेत्रों को परिभाषित करने के लिए HTML <क्षेत्र> तत्व का उपयोग करें
किसी छवि मानचित्र को इंगित करने के लिए, HTML में <img> तत्व का उपयोग करेंusemapविशेषता का प्रयोग करें

अभ्यास

चित्र 9: अभ्यास उदाहरण (img10.png)

❓छवि मानचित्र को परिभाषित करने के लिए सही HTML तत्व क्या है?

<imagemap> तत्व

✗ ग़लत! यह एक मान्य HTML तत्व नहीं है

<imgmap> तत्व

✗ ग़लत! यह एक मान्य HTML तत्व नहीं है

<मानचित्र> तत्व

✓ ठीक है! <map> टैग का उपयोग छवि मानचित्रों को परिभाषित करने के लिए किया जाता है

HTML छवि टैग

चित्र 10: HTML छवि टैग पर नोट (img11.png)

टैग	व्याख्या
<img>	एक छवि को परिभाषित करता है
<map>	एक छवि मानचित्र को परिभाषित करता है
<area>	छवि मानचित्र के भीतर क्लिक करने योग्य भाग को परिभाषित करता है
<picture>	एकाधिक छवि संसाधनों के लिए एक कंटेनर को परिभाषित करता है