รู้ไหมว่า HTML ไม่ได้แค่แสดงรูปภาพเท่านั้น แต่ยังสามารถสร้าง “แผนที่ภาพ (Image Map)” ได้ด้วย
โดยใช้ <map> เพื่อกำหนดพื้นที่คลิกบนรูปภาพ และใช้ <area> เพื่อระบุแต่ละส่วนของภาพให้ลิงก์ไปยังหน้าอื่นได้
จากภาพตัวอย่าง:
- คลิกที่รูปแก้วกาแฟ ไปยัง หน้ากาแฟ
- คลิกที่สมุด ไปยัง หน้าสมุด
- คลิกที่ส้ม ไปยัง หน้าส้ม
การใช้งานแท็ก Map
แนวคิดของการใช้งาน <map> คือการกำหนดพื้นที่ของรูปภาพที่สามารถคลิกได้
โดยระบุว่าบริเวณใดของภาพจะเชื่อมโยงไปยังหน้าใด ซึ่งผู้พัฒนาเป็นผู้กำหนดเอง
<img src="images/workplace.jpg" alt="Workplace" usemap="#workmap" width="720" height="468">
<map name="workmap">
<area shape="circle" coords="185,184,51" alt="A Cup of Coffee" href="coffee.html">
<area shape="rect" coords="311,197,471,423" alt="Note Book" href="notebook.html">
<area shape="circle" coords="603,315,34" alt="orange" href="orange.html">
</map>
วิธีการใช้งาน Image Map
ในโค้ดตัวอย่างก่อนหน้า <img> จะทำหน้าที่แสดงภาพตามปกติ
เพียงแต่มีการเพิ่มแอตทริบิวต์ usemap เพื่อเชื่อมโยงกับ <map> ที่กำหนดพื้นที่คลิกลิงก์ไว้
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
- ค่าใน
usemapต้องขึ้นต้นด้วยเครื่องหมาย# - ชื่อหลัง
#ต้องตรงกับค่าnameของ<map>
การสร้าง Image Map
สร้างแท็ก
<map> และตั้งค่า name ให้ตรงกับ usemap ของรูป
<map name="workmap">
<!-- <area> ต่าง ๆ จะอยู่ภายในนี้ -->
</map>
ค่า
name="workmap" ต้องตรงกับ usemap="#workmap" ของ <img>
การระบุพื้นที่คลิก <area>
การกำหนดพื้นที่คลิกใช้แท็ก
<area> ภายใน <map>
โดยกำหนดรูปร่าง shape ของพื้นที่ที่สามารถคลิกได้ | ค่า | รูปร่าง | คำอธิบาย |
|---|---|---|
rect | สี่เหลี่ยม | ใช้พิกัดจุดมุมบนซ้าย และมุมล่างขวา |
circle | วงกลม | ใช้พิกัดจุดศูนย์กลาง และรัศมี |
poly | หลายเหลี่ยม | ใช้พิกัดหลายจุดเชื่อมต่อกัน |
default | ทั้งภาพ | ครอบคลุมพื้นที่ทั้งหมด |
ต้องเลือกค่าใดค่าหนึ่ง เพื่อกำหนดพิกัดพื้นที่คลิกในภาพได้อย่างถูกต้อง
shape="rect" (สี่เหลี่ยม)
พื้นที่สี่เหลี่ยม (rectangle) ใช้สำหรับกำหนดบริเวณคลิกที่เป็นรูปสี่เหลี่ยมผืนผ้า โดยระบุพิกัด
coords จำนวน 4 ค่า ได้แก่ x1,y1,x2,y2 ซึ่งแทนมุมซ้ายบนและมุมขวาล่างของพื้นที่คลิก จากตัวอย่างในรูป ค่าของแกน X และ Y คือ 311,197 หมายถึง 311 พิกเซลจากซ้าย, 197 พิกเซลจากบน
จากตัวอย่างในรูป ค่าของแกน
x และ y คือ 471,423 หมายถึง 471 พิกเซลจากซ้าย, 432 พิกเซลจากบน 
เพียงเท่านี้ เราก็ได้พิกัดที่ต้องการแล้ว จากนั้นนำพิกัดที่ได้มาใส่ในโค้ด โดยเขียนได้ดังนี้
<area shape="rect" coords="311, 197, 471, 423" href="notebook.htm">
บริเวณนี้เป็นพื้นที่คลิกได้ และเมื่อคลิกแล้วจะไปยังหน้า “notebook.htm”
<img src="images/workplace.jpg" alt="Workplace" usemap="#workmap" width="720" height="468">
<map name="workmap">
<area shape="rect" coords="311,197,471,423" alt="Note Book" href="notebook.html">
</map>
shape="circle" (วงกลม)
พื้นที่วงกลม (circle) ใช้สำหรับกำหนดบริเวณคลิกที่มีลักษณะเป็นวงกลม โดยระบุพิกัด
coords ทั้งหมด 3 ค่า ได้แก่ xCenter, yCenter, radius ซึ่งแทนตำแหน่งศูนย์กลางของวงกลมและรัศมีตามลำดับ
เริ่มจากหา จุดศูนย์กลางของวงกลม จากรูปตัวอย่างคือ
603,315 
จากนั้นระบุรัศมี ตัวอย่างจากรูปคือ
34 
เมื่อได้พิกัดและรัศมีแล้ว สามารถเขียนโค้ดได้ดังนี้
<area shape="circle" coords="603, 315, 34" href="coffee.htm">
บริเวณนี้เป็นพื้นที่คลิกได้ และเมื่อคลิกแล้วจะไปยังหน้า “orange.htm”
<img src="images/workplace.jpg" alt="Workplace" usemap="#workmap" width="720" height="468">
<map name="workmap">
<area shape="circle" coords="603,315,34" alt="orange" href="orange.html">
</map>
shape="poly" (หลายเหลี่ยม)
รูปหลายเหลี่ยม (polygon) จะประกอบด้วยพิกัดหลายจุดที่เชื่อมต่อกันด้วยเส้นตรง ทำให้พื้นที่คลิกมีลักษณะตามรูปร่างของภาพ โดยระบุพิกัดต่อเนื่องกัน เช่น
x1,y1,x2,y2,... เพื่อกำหนดขอบเขตของรูปหลายเหลี่ยม
จากตัวอย่างรูปปลาดาวด้านล่าง เราจะมาดูกันว่าจะสร้างพื้นที่คลิกได้อย่างไร
เริ่มจากการหาพิกัด
x และ y รอบรูปปลาดาว 
จากนั้นนำพิกัดที่ได้มาใส่ในโค้ด
<area shape="poly" coords="303,139,311,156,298,204,356,209,373,219,354,234,295,255,298,307,291,334,267,324,239,267,210,272,162,289,156,279,211,230,172,195,168,173,196,172,247,191" href="starfish.htm">
บริเวณนี้เป็นพื้นที่คลิกได้ และเมื่อคลิกแล้วจะไปยังหน้า “starfish.htm” ดังภาพ
<img src="images/starfish.webp" alt="Starfish" usemap="#starmap" width="720" height="479">
<map name="starmap">
<area shape="poly" coords="303,139,311,156,298,204,356,209,373,219,354,234,295,255,298,307,291,334,267,324,239,267,210,272,162,289,156,279,211,230,172,195,168,173,196,172,247,191" href="starfish.html">
</map>
Image Map กับ JavaScript
สามารถสร้างพื้นที่คลิกผ่านทางฟังก์ชันของ JavaScript ได้ โดยเพิ่ม Element <area> ลงใน JavaScript
<img src="images/workplace.jpg" alt="Workplace" usemap="#workmap" width="720" height="468">
<map name="workmap">
<area shape="Circle" coords="603,315,34" href="https://www.hostatom.com/" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("คุณคลิกที่รูปส้ม");
}
</script>
สรุป
- ใช้
<map>เพื่อกำหนด แผนที่รูปภาพ (image map) - ใช้
<area>ภายในmapเพื่อระบุพื้นที่ที่คลิกได้ ภายใน image map - ใช้
usemapใน<img>เพื่อ เชื่อมโยงตำแหน่งคลิกกับ image map