HTML
छवि मानचित्र
खोज…
वाक्य - विन्यास
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
पैरामीटर
| टैग / विशेषता | मूल्य |
|---|---|
<img> | नीचे <img> साथ उपयोग करने के लिए छवि मानचित्र-विशिष्ट विशेषताएँ हैं। नियमित <img> विशेषताएँ लागू होती हैं। |
usemap | हैश चिन्ह वाले मानचित्र का name इसके आगे बढ़ा। उदाहरण के लिए, name="map" , छवि में usemap="#map" होना चाहिए। |
<map> | |
name | इसे पहचानने के लिए मानचित्र का नाम। छवि के usemap विशेषता के साथ उपयोग किया जाना है। |
<area> | नीचे <area> -स्पेशल गुण हैं। जब href निर्दिष्ट किया जाता है, तो <area> एक कड़ी बनाकर, <area> ping को छोड़कर एंकर टैग ( <a> ) की सभी विशेषताओं का समर्थन करता है। उन्हें MDN डॉक्स पर देखें। |
alt | यदि चित्र समर्थित नहीं हैं, तो प्रदर्शित करने के लिए वैकल्पिक पाठ। यह केवल तभी आवश्यक है जब href को <area> पर भी सेट किया गया हो। |
coords | निर्देशांक चयन क्षेत्र को रेखांकित करता है। जब shape="polygon" , यह "एक्स, वाई" जोड़े की सूची को कॉमा (यानी, shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." )। जब shape="rectangle" , यह left, top, right, bottom सेट किया जाना चाहिए। जब shape="circle" , यह centerX, centerY, radius सेट होना चाहिए। |
href | हाइपरलिंक का URL, यदि निर्दिष्ट हो। यदि इसे छोड़ दिया जाता है, तो <area> एक हाइपरलिंक का प्रतिनिधित्व नहीं करेगा। |
shape | <area> का आकार। करने के लिए सेट किया जा सकता default पूरी छवि (कोई चयन करने के लिए coords आवश्यक विशेषता), circle या circ एक चक्र, के लिए rectangle या rect एक आयत के लिए, और polygon या poly कोने अंक द्वारा निर्दिष्ट एक बहुभुज क्षेत्र के लिए। |
टिप्पणियों
उपरोक्त पैरामीटर सूची को MDN डॉक्स से संशोधित किया गया है:
<map>और<area>।एक छवि संपादक के साथ एक छवि मानचित्र के निर्देशांक बनाने के लिए संभव है (जैसे कि ऊपर के परिचयात्मक उदाहरण में) एक छवि संपादक के साथ निर्देशांक दिखाता है (जैसे कि GIMP)। हालाँकि, इस तरह के एक छवि मानचित्र जनरेटर का उपयोग करना सामान्य रूप से आसान हो सकता है।
छवि मानचित्र का परिचय
विवरण
एक छवि मानचित्र क्लिक करने योग्य क्षेत्रों के साथ एक छवि है जो आमतौर पर हाइपरलिंक के रूप में कार्य करता है।
छवि को <img> टैग द्वारा परिभाषित किया गया है, और मानचित्र को प्रत्येक क्लिक करने योग्य क्षेत्र को दर्शाने के लिए <area> टैग के साथ <area> <map> टैग द्वारा परिभाषित किया गया है। छवि और मानचित्र को बांधने के लिए usemap और name विशेषताओं का उपयोग करें।
मूल उदाहरण
एक छवि मानचित्र बनाना ताकि नीचे की छवि में प्रत्येक आकृति क्लिक करने योग्य हो:
कोड निम्नानुसार होगा:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
आपको देखना चाहिए कि ब्राउज़र उन क्षेत्रों को पहचानता है जब कर्सर पॉइंटर बन जाता है। JSFiddle पर एक लाइव डेमो देखें, या नीचे एक प्रदर्शन देखें:
