Image Map ใน HTML ช่วยให้คุณกำหนดพื้นที่หลายบริเวณบนรูปภาพเดียว ให้แต่ละบริเวณลิงก์ไปยัง URL ต่างกันได้ เช่น คลิกที่รูปสี่เหลี่ยมไปเว็บไซต์หนึ่ง คลิกที่รูปสามเหลี่ยมไปอีกเว็บหนึ่ง
แท็กหลักที่ใช้
- <map> - กำหนดชื่อแผนที่ (name attribute)
- <area> - กำหนดพื้นที่คลิกได้แต่ละบริเวณ วางอยู่ภายใน <map>
- <img> - ใช้ attribute
usemap="#mapname"เพื่อเชื่อมกับแผนที่
Attribute สำคัญของ <area>
| Attribute | คำอธิบาย |
|---|---|
shape | รูปร่างพื้นที่: rect (สี่เหลี่ยม), circle (วงกลม), poly (รูปหลายเหลี่ยม) |
coords | พิกัดของพื้นที่ (รูปแบบแตกต่างตาม shape) |
href | URL ปลายทางเมื่อคลิก |
alt | ข้อความทางเลือกสำหรับ accessibility |
target | เป้าหมายการเปิดลิงก์ (_blank, _self, ฯลฯ) |
download | บังคับดาวน์โหลดแทนการเปิด |
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<body>
<img src="/images/usemap.gif" alt="usemap" usemap="#lessons"/>
<map name="lessons">
<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>
คำแนะนำ
- พิกัด (coords) เริ่มจากมุมซ้ายบน (0,0)
- ใช้เครื่องมือออนไลน์เช่น image-map.net ช่วยสร้างพิกัดได้ง่ายขึ้น
- ควรเพิ่ม alt text ทุก area เพื่อรองรับ screen reader
