สร้าง Image Map ใน HTML

ใช้แท็ก <map> กำหนด image map ร่วมกับ <img usemap="#name"> และ <area> กำหนดพื้นที่คลิกได้

แอตทริบิวต์ของ map

ตัวอย่าง

<!DOCTYPE html> <html>    <head>       <title>HTML map Tag</title>    </head>    <body>       <img src="/images/html.gif" alt="HTML Map" usemap="#html"/>       <map name="html">          <area shape="circle" coords="154,150,59" href="about/about_team.htm" alt="Team" target="_self" />       </map>    </body> </html>

รูปร่าง area (shape)

• rect - สี่เหลี่ยม: coords="x1,y1,x2,y2"
• circle - วงกลม: coords="x,y,radius"
• poly - หลายเหลี่ยม: coords="x1,y1,x2,y2,x3,y3..."
• default - พื้นที่เหลือทั้งหมด

Image map ใช้สำหรับแผนที่โต้ตอบ, แผนผังร่างกาย, รูปภาพผลิตภัณฑ์ที่คลิกได้หลายจุด