แอตทริบิวต์ coords: กำหนดพิกัดพื้นที่ใน Image Map

แอตทริบิวต์ coords (Coordinates) ใช้ร่วมกับแท็ก <area> ภายใน <map> เพื่อกำหนดพิกัดของพื้นที่คลิกได้ (Hotspot) บนรูปภาพ (Image Map) รูปแบบพิกัดขึ้นอยู่กับ shape

รูปแบบ coords ตาม Shape

Shape	รูปแบบ coords	คำอธิบาย
rect (สี่เหลี่ยม)	`x1,y1,x2,y2`	มุมซ้ายบน (x1,y1) ถึง มุมขวาล่าง (x2,y2)
circle (วงกลม)	`x,y,r`	จุดศูนย์กลาง (x,y) และรัศมี r
poly (หลายเหลี่ยม)	`x1,y1,x2,y2,x3,y3...`	ลำดับจุดมุม (อย่างน้อย 3 จุด = 6 ตัวเลข)
default	(ไม่ต้องใส่ coords)	พื้นที่ที่เหลือทั้งหมด

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

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง HTML coords attribute</title>
</head>
<body>
    <img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html">
    
    <map name="html">
        <!-- วงกลม: ศูนย์กลาง (154,150) รัศมี 59 -->
        <area shape="circle" coords="154,150,59" 
              href="/about/about_team.htm" alt="Team" target="_self" />
        
        <!-- สี่เหลี่ยม: (10,10) ถึง (100,100) -->
        <area shape="rect" coords="10,10,100,100" 
              href="/about/company.htm" alt="Company" />
        
        <!-- หลายเหลี่ยม -->
        <area shape="poly" coords="200,50, 250,100, 200,150, 150,100" 
              href="/about/diamond.htm" alt="Diamond" />
    </map>
</body>
</html>

เครื่องมือช่วยสร้าง Image Map

Online: image-map.net, imgmap.net
Figma/Photoshop: ใช้ Slice Tool หรือ Plugin
DevTools: Inspect Element → Copy coordinates

โครงสร้าง Image Map สมบูรณ์

<img src="map.jpg" usemap="#mymap" alt="แผนที่สำนักงาน">
<map name="mymap">
    <area shape="rect" coords="0,0,100,100" href="/room1" alt="ห้อง 1">
    <area shape="circle" coords="200,200,50" href="/room2" alt="ห้อง 2">
    <area shape="default" href="/other" alt="พื้นที่อื่น">
</map>

Accessibility: ระบุ alt ให้ทุก <area> เสมอ