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>
![[แพ็คสุดคุ้ม] Pantene แพนทีน บำรุงผมแห้งเสีย แชมพู 380 มล.+ครีมนวดผม Collagen สูตรเข้มข้น 270มล .](https://down-tx-th.img.susercontent.com/th-11134207-7qul1-lfap6gn0gjcd11.webp)
