<area> एलिमेंट का coords एट्रिब्यूट इमेज मैप में क्षेत्र के निर्देशांक सेट करने के लिए उपयोग किया जाता है। एट्रिब्यूट का उपयोग shape एट्रिब्यूट के साथ करें और क्षेत्र का आकार और आकृति सेट करें।
निम्नलिखित सिंटैक्स है:
<area coords="value">
उपरोक्त मान के तहत, आप निम्नलिखित निर्देशांक विभिन्न पैरामीटर्स के साथ सेट कर सकते हैं:
| x1,y1,x2,y2 | आयत के ऊपरी-बाएं और निचले-दाएं कोने के निर्देशांक (shape="rect") |
| x,y,radius | वृत्त के केंद्र के निर्देशांक और त्रिज्या (shape="circle") |
| x1,y1,x2,y2,..,xn,yn | बहुभुज के किनारों के निर्देशांक। |
आइए अब <area> एलिमेंट के coords एट्रिब्यूट को लागू करने का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <body> <h2>Learning</h2> <p>Learn these technologies with ease....</p> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
आउटपुट
उपरोक्त उदाहरण में, हमने निम्नलिखित इमेज पर मैप सेट किया है:
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
अब, हमने इसके लिए मैप और क्षेत्र सेट किया है:
<map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map>
क्षेत्र सेट करते समय, हमने coords एट्रिब्यूट के साथ क्षेत्र के निर्देशांक सेट किए:
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" />
