การค้นหาข้อความทางเลือก (alt text) ของพื้นที่แผนที่ภาพใน JavaScript

คุณสมบัติ alt

ใน JavaScript สามารถเข้าถึงข้อความทางเลือก (alternate text) ของแท็ก <area> ในแผนที่ภาพ (image map) ได้ผ่านคุณสมบัติ alt ของอ็อบเจกต์ HTMLAreaElement

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<body>
  <img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html">
  <map name="html">
    <area id="myarea" shape="circle" coords="154,150,59" 
          href="about.htm?id=company" alt="Team" target="_self">
  </map>
  
  <script>
    var area = document.getElementById("myarea");
    var altText = area.alt;
    document.write("Alternate Text: " + altText);
  </script>
</body>
</html>

ความสำคัญของแอตทริบิวต์ alt

• เข้าถึงได้ (Accessibility): Screen reader จะอ่านข้อความนี้ให้ผู้ใช้พิการทางสายตาได้ยิน
• SEO: ช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาของพื้นที่คลิกได้
• Fallback: แสดงข้อความเมื่อภาพโหลดไม่ได้
• บังคับตามมาตรฐาน HTML: แท็ก <area> ต้องมีแอตทริบิวต์ alt เสมอ

คุณสมบัติอื่น ๆ ของ <area>

วิธีการเข้าถึงหลายพื้นที่

// ดึงทุก area ใน map
var areas = document.querySelectorAll("map area");
areas.forEach(function(area) {
  console.log("ID:", area.id, "| Alt:", area.alt, "| Href:", area.href);
});

การแปลง Infinity เป็น Boolean ใน JavaScript

การค้นหาค่าแอตทริบิวต์ type ของลิงก์ใน JavaScript