HTML DOM एरिया ऑब्जेक्ट HTML में इमेज मैप से जुड़ा है। क्षेत्र मूल रूप से छवि मानचित्र के अंदर क्लिक करने योग्य क्षेत्र का प्रतिनिधित्व करता है।
इमेज ऑब्जेक्ट हमें ऑब्जेक्ट के भीतर एलीमेंट बनाने और एक्सेस करने में मदद करता है। हम उपयोगकर्ता इनपुट के आधार पर मानचित्र के अंदर क्लिक करने योग्य क्षेत्र को बदल सकते हैं या छवि मानचित्र के आकार आदि को बदल सकते हैं। इसका उपयोग क्षेत्र तत्व के अंदर लिंक में हेरफेर करने के लिए भी किया जा सकता है
गुण
क्षेत्र वस्तु के लिए निम्नलिखित गुण हैं -
| मान | विवरण |
|---|---|
| alt | ऑल्ट विशेषता मान सेट करने या वापस करने के लिए। |
| कोर्डर्स | किसी क्षेत्र की कॉर्ड विशेषताओं को सेट या वापस करने के लिए। |
| हैश | href विशेषता मान के एंकर भाग को सेट या वापस करने के लिए। |
| होस्ट | href विशेषता मान के होस्टनाम और पोर्ट भाग दोनों को सेट या वापस करने के लिए। |
| होस्टनाम | href विशेषता मान के होस्टनाम भाग को सेट करने या वापस करने के लिए। |
| href | किसी क्षेत्र की href विशेषता का मान सेट या वापस करने के लिए। |
| noHref | किसी क्षेत्र की nohref विशेषता का मान सेट या वापस करने के लिए। HTML5 में पदावनत। |
| मूल | href विशेषता मान के प्रोटोकॉल, होस्टनाम और पोर्ट भाग को वापस करने के लिए। |
| पासवर्ड | href विशेषता मान का पासवर्ड भाग सेट करने या वापस करने के लिए। |
| पथनाम | href विशेषता मान के पथनाम भाग को सेट या वापस करने के लिए। |
| पोर्ट | href विशेषता मान के पोर्ट भाग को सेट करने या वापस करने के लिए। |
उदाहरण
आइए क्षेत्र वस्तु का एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</p>
<button onclick="myWonder()">CLICK IT</button>
<p id="SAMPLE"></p>
<script>
function myWonder() {
var x = document.createElement("AREA");
x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
x.setAttribute("shape", "circle");
x.setAttribute("coords", "124,58,16");
document.getElementById("WonderWorld").appendChild(x);
document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
you can now click on Maya City.";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
क्लिक आईटी बटन पर क्लिक करने के बाद -
अब जब आप "माया सिटी" पर क्लिक करेंगे तो यह आपको उनके विकिपीडिया पेज पर ले जाएगा।
उपरोक्त उदाहरण में -
हमने टैग का उपयोग करके एक छवि शामिल की है और इसकी चौड़ाई, ऊंचाई और आईडी निर्दिष्ट की है।
<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">
फिर हमने एक खाली नक्शा बनाया है जहां हम बाद में एक छवि, क्षेत्र और अन्य चीजें जोड़ेंगे -
<map id="WonderWorld" name="7Wonders"></map>
इसके बाद हमने CLICK IT नाम का एक बटन बनाया है जो myWonder() फ़ंक्शन को निष्पादित करेगा।
<button onclick="myWonder()">CLICK IT</button>
MyWonder () फ़ंक्शन पहले एक तत्व बनाता है और इसे वेरिएबल x को असाइन करता है। इसमें विभिन्न विशेषताएँ सेट करें जैसे कि href, आकार और डोरियाँ। अंत में हम वेरिएबल x से जुड़े एलिमेंट को इमेज मैप में चाइल्ड नोड के रूप में जोड़ते हैं और बनाए गए एरिया एलिमेंट को भी प्रदर्शित करते हैं और अब आप इनर HTML का उपयोग करके आईडी "सैंपल" के साथ पैराग्राफ के अंदर "माया सिटी" पर क्लिक कर सकते हैं -
function myWonder() {
var x = document.createElement("AREA");
x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city ");
x.setAttribute("shape", "circle");
x.setAttribute("coords", "124,58,16");
document.getElementById("WonderWorld").appendChild(x);
document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
you can now click on Maya City.";
}