HTML DOM Area ऑब्जेक्ट

HTML DOM Area ऑब्जेक्ट HTML में इमेज मैप से जुड़ा होता है। Area मूल रूप से इमेज मैप के अंदर क्लिक करने योग्य क्षेत्र को दर्शाता है।

इमेज ऑब्जेक्ट हमें ऑब्जेक्ट के भीतर <area> एलिमेंट को बनाने और एक्सेस करने में मदद करता है। हम यूज़र इनपुट के आधार पर मैप के अंदर क्लिक करने योग्य क्षेत्र को बदल सकते हैं या इमेज मैप के आकार आदि को बदल सकते हैं। इसका उपयोग area एलिमेंट के अंदर लिंक को मैनिपुलेट करने के लिए भी किया जा सकता है।

प्रॉपर्टीज

Area ऑब्जेक्ट के लिए निम्नलिखित प्रॉपर्टीज हैं -

उदाहरण

आइए area ऑब्जेक्ट का एक उदाहरण देखें -

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

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा -

CLICK IT बटन पर क्लिक करने के बाद -

अब जब आप “Maya city” पर क्लिक करेंगे, तो यह आपको उनके विकिपीडिया पेज पर ले जाएगा।

उपरोक्त उदाहरण में -

हमने  टैग का उपयोग करके एक इमेज शामिल की है और इसकी चौड़ाई, ऊंचाई और id निर्दिष्ट की है।

<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">

फिर हमने एक खाली मैप बनाया जहां हम बाद में इमेज, area और अन्य चीजें जोड़ेंगे -

<map id="WonderWorld" name="7Wonders"></map>

हमने तब CLICK IT नाम का एक बटन बनाया जो myWonder() फ़ंक्शन को निष्पादित करेगा।

<button onclick="myWonder()">CLICK IT</button>

myWonder() फ़ंक्शन पहले एक  एलिमेंट बनाता है और इसे वेरिएबल x को असाइन करता है। इसमें href, shape और cords जैसे विभिन्न एट्रिब्यूट सेट करता है। अंत में हम वेरिएबल x से जुड़े  एलिमेंट को इमेज मैप के चाइल्ड नोड के रूप में जोड़ते हैं और id “Sample” वाले पैराग्राफ में innerHTML का उपयोग करके बनाए गए area एलिमेंट को प्रदर्शित करते हैं और अब आप “Maya city” पर क्लिक कर सकते हैं -

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."; }