แอตทริบิวต์ href ของ <area>: กำหนดลิงก์เป้าหมายใน Image Map

ไวยากรณ์ (Syntax)

<area href="URL">

รูปแบบ URL ที่รองรับ

• Absolute URL: https://example.com/page.html
• Relative URL: /page.html, ../page.html
• Anchor: #section-id
• Protocol: mailto:email@example.com, tel:+1234567890
• JavaScript: javascript:func() (ไม่แนะนำ)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>การเรียนรู้</h2>
  <img src="/images/usemap.gif" alt="usemap" 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>

โครงสร้าง Image Map

<img src="map.jpg" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="url" alt="text" />
  <area shape="circle" coords="x,y,radius" href="url" alt="text" />
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="url" alt="text" />
  <area shape="default" href="url" alt="text" /> <!-- พื้นที่อื่นๆ -->
</map>

Shape และ Coords

จุดสำคัญ

• href เป็น Required Attribute สำหรับ <area> ที่เป็นลิงก์
• alt **จำเป็น** สำหรับ Accessibility (Screen Readers)
• target ควบคุมที่เปิดลิงก์ (_blank, _self, ฯลฯ)
• rel, download, hreflang, type ใช้ได้เหมือน <a>
• Coordinates เป็น Pixel จากมุมซ้ายบนของรูปภาพ