HTML Image Maps เพิ่มพื้นที่ที่สามารถคลิกได้ให้รูปภาพ

แท็ก <map> ใช้สำหรับกำหนด image-map ให้กับรูปภาพ คือการทำให้รูปภาพรูปหนึ่งมีพื้นที่สำหรับคลิกได้หลายที่ แต่ละที่เมื่อคลิกแล้วก็จะลิงไปยัง url ที่ต่างกัน

การใช้งาน Image Map

เมื่อจะใช้งาน Image Map ลำดับแรกต้องแสดงรูปภาพด้วยแท็ก <img> ก่อน โดยที่ต้องเพิ่มแอททริบิวต์ usemap เข้าไปด้วย พร้อมทั้งระบุชื่อของ map ปลายทาง เช่น

<img src="myimage.jpg" alt="" usemap="#mymap">

การระบุชื่อ map ปลายทาง ต้องขึ้นต้นด้วยเครื่องหมาย hash tag (#) เสมอ เช่น usemap="#mymap"

Map แผนที่ในรูปภาพ

หลังจากสร้างแท็ก <img> ตามกฏเกณฑ์ที่กล่าวด้านบนแล้ว ให้เพิ่มเอลิเมต์ <map> เพื่อสร้าง image-map โดยต้องกำหนดค่าของแอททริบิวต์ name ให้ตรงกับที่ระบุในแอททริบิวต์ usemap ของเอลิเมนต์ img ที่ได้สร้างไว้ก่อน เช่น

<map name="mymap"></map>

Areas พื้นที่สำหรับคลิก

หลังจากนั้นในเพิ่มพื้นที่ที่สามารถคลิกได้ clickable areas โดยใช้เอลิเมนต์ <area> โดยให้แทรกไว้ภายในเอลิเมนต์ <map></map>

Shape

หลังจากนั้นก็กำหนด shape หรือรูปร่างพื้นที่สำหรับคลิกไว้ภายในเอลิเมนต์ <area> โดยกำหนดไว้ในแอททริบิวต์ shape ซึ่งค่าที่สามารถกำหนดได้จะมีดังนี้

rect พื้นที่สี่เหลี่ยม
circle พื้นที่วงกลม
poly พื้นที่หลายเหลี่ยม
default พื้นที่ทั้งหมดในรูปภาพ

Coordinates

อีกสิ่งหนึ่งที่เราต้องกำหนดก็คือ coordinates หรือพิกัด ซึ่งจะต้องกำหนดเป็นแนวแกน x และแกน y เช่น coordinates 92, 322 จะหมายถึง 92 pixels จากขอบด้านซ้าย และ 322 pixels จากขอบด้านบน สำหรับการเลือกพื้นที่สี่เหลี่ยม เราต้องกำหนด coordinates 2 คู่ เช่น 92,322,276,465 ซึ่งรูปแบบจะเป็นดังนี้

<area shape="rect" coords="92,322,276,465" href="https://www.dcrub.com/html-images">

ถ้าจะกำหนดพื้นที่เป็นวงกลม ต้องกำหนดจุดศูนย์กลางของวงกลมก่อน หลังจากนั้นจึงกำหนดค่ารัศมี รูปแบบจะเป็นดังนี้

<area shape="rect" coords="169,138,75" href="https://www.dcrub.com/html-images">

จากโค้ดตัวอย่าง 2 ค่าแรกคือพิกัดจากขอบด้านซ้ายและขอบด้านบน ค่าสุดท้ายคือความกว้างของรัศมี

โค้ดที่สมบูรณ์ของการทำ Image Map จะเป็นดังนี้

<img src="https://www.dcrub.com/wp-content/uploads/2020/04/Image-Maps-1.jpg" alt="Images Map" usemap="#mymap">

<map name="mymap">      
	<area shape="circle" coords="169,138,75" alt="HTML Images" href="https://www.dcrub.com/html-images">      
	<area shape="rect" coords="346,75,523,212" alt="Index Method" href="https://www.dcrub.com/python-tuple-index-method">
	<area shape="rect" coords="92,322,276,465" alt="Append Method" href="https://www.dcrub.com/python-list-append-method">
	<area shape="rect" coords="380,311,560,476" alt="javascript operators" href="https://www.dcrub.com/javascript-operators">
  	<area shape="default" alt="bootstrap text" href="https://www.dcrub.com/bootstrap4-text-typography">
</map>

ลองคลิกปุ่มต่าง ๆ ในภาพด้านล่างนี้ดูครับ

ในรูปภาพมีปุ่มทั้งหมด 4 ปุ่ม แต่ทุกปุ่มอยู่ในรูปภาพเดียวกัน เมื่อคลิกที่ปุ่มแต่ละปุ่ม จะเปิดไปยังลิงค์ที่แตกต่างกัน แต่ถ้าคลิกที่พื้นที่ภายนอกปุ่ม ก็จะเปิดไปอีกลิงค์หนึ่ง ซึ่งเป็นผลมาจากการทำ Image Map นั่นเอง

Image Map กับ JavaScript

พื้นที่สำหรับคลิก ไม่จำเป็นต้องลิงค์ไปที่หน้าอื่นเสมอไป เราสามารถสั่งให้ Javascript Function ทำงานก็ได้ โดยการเพิ่มอีเวนต์ click ไว้ในเอลิเมนต์ <area> ดังตัวอย่าง

<img src="https://www.dcrub.com/wp-content/uploads/2020/04/Image-Maps-1.jpg" alt="Images Map" usemap="#mymap">

<map name="mymap">         
	<area shape="rect" coords="346,75,523,212" alt="Index Method" onclick="myFunction()">
</map>