HTML <area> href एट्रिब्यूट: इमेज मैप लिंक टारगेट

<area> href एट्रिब्यूट

href एट्रिब्यूट <area> एलिमेंट में हाइपरलिंक टारगेट (लिंक गंतव्य) निर्दिष्ट करता है। यह <a> टैग के href के समान काम करता है लेकिन इमेज मैप के विशिष्ट क्षेत्रों के लिए होता है।

सिंटैक्स

<area href="URL">

URL प्रकार

एब्सोल्यूट: https://example.com/page.html
रिलेटिव: /html/index.htm, ../page.html
एंकर: #section-id
प्रोटोकॉल: mailto:email@example.com, tel:+1234567890
JavaScript: javascript:void(0) (अनुशंसित नहीं)

उदाहरण: इमेज मैप में तीन लिंक्स

<!DOCTYPE html>
<html>
<body>
  <h2>सीखना</h2>
  <p>इन तकनीकों को आसानी से सीखें....</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="..." href="/perl/index.htm" .../>
  <area shape="rect" coords="..." href="/html/index.htm" .../>
  <area shape="circle" coords="..." href="/php/index.htm" .../>
</map>

shape और coords

shape	coords प्रारूप	उदाहरण
rect	x1,y1,x2,y2	कोने: बाएँ,ऊपर,दाएँ,नीचे
circle	x,y,radius	केंद्र x,y और त्रिज्या
poly	x1,y1,x2,y2,...	बहुभुज के शीर्ष
default	(कोई coords नहीं)	पूरी इमेज का शेष भाग

एक्सेसिबिलिटी

प्रत्येक <area> में alt एट्रिब्यूट अनिवार्य है (यदि href मौजूद है) - स्क्रीन रीडर्स के लिए क्षेत्र का उद्देश्य वर्णन करता है।