วิธีดึงค่าแอตทริบิวต์ usemap ของรูปภาพด้วย JavaScript

บทนำ

แอตทริบิวต์ usemap ของแท็ก <img> ใช้เชื่อมโยงกับแท็ก <map> เพื่อสร้าง Image Map ใน JavaScript สามารถดึงค่านี้ได้ผ่าน property useMap (ตัว M ใหญ่) ของ HTMLImageElement

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

<!DOCTYPE html>
<html>
<body>
  <img id="myid" src="/images/html.gif" alt="HTML Map" usemap="#html"/>
  <map name="html">
    <area id="myarea" shape="circle" coords="154,150,59" href="about.htm" alt="Team">
  </map>
  <script>
    var x = document.getElementById("myid").useMap;
    document.write("<br>Usemap: " + x);
  </script>
</body>
</html>

ผลลัพธ์

Usemap: #html

คำอธิบาย

• .useMap - คืนค่าของแอตทริบิวต์ usemap รวมเครื่องหมาย # นำหน้า
• Property นี้อ่านได้ (readable) และเขียนได้ (writable) - สามารถเปลี่ยน map ได้
• ชื่อ property ใช้ camelCase: useMap ไม่ใช่ usemap

การเปลี่ยน Map แบบไดนามิก

// เปลี่ยน usemap ไปยัง map อื่น
document.getElementById("myid").useMap = "#newmap";

ข้อสังเกต

แอตทริบิวต์ name ของ <map> ต้องตรงกับค่า usemap (ไม่รวม #) เช่น name="html" ตรงกับ usemap="#html"