Cách chỉ định hình ảnh làm bản đồ client-side (usemap) trong HTML?

Thuộc tính usemap trên <img> liên kết hình ảnh với <map> (chứa các <area>) để tạo image map — hình ảnh có nhiều vùng nhấp chuột khác nhau.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>Thẻ map HTML</title>
  </head>
  <body>
    <img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html" />
    <!-- Tạo mappings -->
    <map name="html">
      <area shape="circle" coords="154,150,59" href="/about/team.htm" alt="Team" target="_self" />
    </map>
  </body>
</html>

Cấu trúc

<img usemap="#ten-map"> — trỏ đến map bằng #id hoặc #name.
<map name="ten-map"> — container các area.
<area shape="..." coords="..." href="..." alt="..."> — từng vùng.

Shape & Coords

Shape	Coords	Ví dụ
rect	x1,y1,x2,y2	0,0,100,50 (trái,trên,phải,dưới)
circle	x,y,r	150,150,50 (tâm x,y, bán kính)
poly	x1,y1,x2,y2...	10,10, 50,5, 90,10, 90,50 (điểm đa giác)
default	(không có)	Vùng còn lại

Lưu ý

Image map không responsive — tọa độ cố định pixel. Dùng JS thư viện (image-map-resizer) hoặc SVG cho responsive.
alt trên <area> bắt buộc (accessibility).
Hiện nay ít dùng — thay bằng SVG, CSS clip-path, hoặc overlay div absolute positioning.