**เข้าใจแท็ก <area> ใน HTML: การสร้างพื้นที่คลิกได้ในแผนที่ภาพ**
ในโลกของการพัฒนาเว็บไซต์ แผนที่ภาพ (Image Map) เป็นเครื่องมือที่ช่วยให้ผู้พัฒนาสามารถสร้างพื้นที่คลิกได้ในรูปภาพ ทำให้ผู้ใช้สามารถโต้ตอบกับรูปภาพได้อย่างมีประสิทธิภาพ แท็ก `<area>` ใน HTML เป็นส่วนสำคัญที่ใช้ภายในแท็ก `<map>` เพื่อกำหนดพื้นที่ที่ผู้ใช้สามารถคลิกได้ในแผนที่ภาพ
### การใช้งานแท็ก `<area>`
การสร้างแผนที่ภาพเริ่มต้นจากการแทรกรูปภาพโดยใช้แท็ก `<img>` และกำหนด `usemap` ที่เชื่อมโยงไปยังแท็ก `<map>` ที่มี ID ตรงกับชื่อที่อยู่ใน `usemap` ดังนี้:
```html
<img src="image.jpg" usemap="#imagemap" alt="Sample Image">
```
ต่อมาเราจะสร้างแท็ก `<map>` ที่มี ID ตรงกับ `usemap` พร้อมกับแท็ก `<area>` ที่กำหนดพื้นที่ที่สามารถคลิกได้:
```html
<map name="imagemap">
<area shape="rect" coords="34,44,270,350" href="link1.html" alt="Link 1">
<area shape="circle" coords="277,300,44" href="link2.html" alt="Link 2">
<area shape="poly" coords="100,100,200,100,200,200" href="link3.html" alt="Link 3">
</map>
```
### อธิบายคุณสมบัติในแท็ก `<area>`
1. **shape**: กำหนดรูปแบบของพื้นที่คลิก เช่น `rect` สำหรับสี่เหลี่ยม, `circle` สำหรับวงกลม และ `poly` สำหรับรูปหลายเหลี่ยม
2. **coords**: กำหนดพิกัดของพื้นที่คลิกตามรูปแบบที่เลือก เช่น พิกัดมุมสี่เหลี่ยม หรือจุดศูนย์กลางและรัศมีของวงกลม
3. **href**: ลิงค์ที่ ผู้ใช้จะถูกนำไปเมื่อคลิกที่พื้นที่นั้น
4. **alt**: ข้อความที่ใช้สำหรับการเข้าถึง (accessibility) เมื่อภาพไม่แสดงผล
### การใช้งานและประโยชน์
การใช้แท็ก `<area>` ช่วยเพิ่มความสะดวกในการนำทางบนเว็บไซต์ ทำให้ผู้ใช้งานสามารถคลิกได้ตรงๆ ไปยังลิงค์ที่ต้องการ โดยไม่ต้องเลื่อนหรืออ่านข้อความจำนวนมาก นอกจากนี้ยังถือเป็นการสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น
### สรุป
แท็ก `<area>` เป็นเครื่องมือที่มีประสิทธิภาพใน HTML ที่ช่วยให้สามารถสร้างพื้นที่คลิกได้ในแผนที่ภาพ โดยทำให้การนำทางบนเว็บไซต์เป็นไปอย่างราบรื่นและมีการโต้ตอบสูง ด้วยการรู้จักวิธีการใช้งานแท็กนี้ นักพัฒนาเว็บสามารถสร้างเว็บไซต์ที่น่าสนใจและใช้งานง่ายได้มากยิ่งขึ้น