การแมปภาพของ HTML เป็นแผนที่ภาพฝั่งไคลเอ็นต์ (client-side image-map) ที่มีพื้นที่คลิกได้ ซึ่งทำหน้าที่เป็นไฮเปอร์ลิงก์ในเอกสาร HTML เพื่อสร้างความสัมพันธ์ระหว่างองค์ประกอบ map และ img ของ HTML แอตทริบิวต์ name ขององค์ประกอบ map จะเชื่อมโยงกับแอตทริบิวต์ usermap ของ img
ไวยากรณ์
ไวยากรณ์มีดังนี้ −
<img src="" alt="" usemap="#name_value"> <map name="name_value"> <area shape="" coords="" href="" alt=""> <area shape="" coords="" href="" alt=""> </map>
ลองดูตัวอย่างการแมปภาพของ HTML −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; } img { width: 200px; height: 200px; } </style> </head> <body> <h1>การแมปภาพของ HTML</h1> <img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg"> <map name="hadoopImg"> <area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100"> </map> <p>คลิกที่โลโก้ด้านบน</p> </body> </html>
ผลลัพธ์
คลิกที่ส่วนโลโก้ (ช้าง) ของ Hadoop ในภาพเพื่อสังเกตการทำงานของการแมปภาพ HTML −
