Ví dụ:
Một bản đồ ảnh, với các khu vực có thể click:
<img src="https://cdn.kiencang.net/wp-content/uploads/2021/02/planets.gif" alt="Planets" usemap="#planetmap" width="145" height="126" />
<map name="planetmap">
<area alt="Sun" coords="0,0,82,126" shape="rect" href="https://cdn.kiencang.net/wp-content/uploads/2021/02/sun.gif" />
<area alt="Mercury" coords="90,58,3" shape="circle" href="https://cdn.kiencang.net/wp-content/uploads/2021/02/merglobe.gif" />
<area alt="Venus" coords="124,58,8" shape="circle" href="https://cdn.kiencang.net/wp-content/uploads/2021/02/venglobe.gif" />
</map>
Kết quả:

Bạn di chuột qua bức ảnh sẽ thấy các vùng được chọn, click vào đó sẽ dẫn đến các hình tương ứng.
Các thông tin như thế này:
coords="0,0,82,126"
Cung cấp thông số toạ độ của các khu vực trên bức ảnh để người dùng click vào.
Định nghĩa và cách dùng
Thẻ <map> được dùng để định nghĩa một bản đồ ảnh phía máy khách. Một bản đồ ảnh là một ảnh có thể được click vào các khu vực trong đó.
Thuộc tính tên của phần tử <map> là yêu câu bắt buộc, nó liên kết với thuộc tính usemap của phần tử <img> và tạo mối quan hệ giữa ảnh và bản đồ.
Phần tử <map> bao gồm các phần tử <area>, dùng để xác định khu vực có thể click trong bản đồ ảnh.
Trình duyệt hỗ trợ
Phần tử | Chrome | IE | FireFox | Safari | Opera |
---|---|---|---|---|---|
<map> | Có | Có | Có | Có | Có |
Sự khác nhau giữa HTML 4.01 và HTML5
Lưu ý: Trong HTML5, nếu thuộc tính id của thẻ <map> được chỉ định, nó phải có cùng giá trị như thuộc tính tên.
Sự khác biệt giữa HTML và XHTML
Trong XHTML, thuộc tính tên là không hợp lệ, và sẽ bị loại bỏ. Sử dụng thuộc tính toàn cục id để thay thế.
Các thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
name | mapname | Yêu cầu bắt buộc. Chỉ định tên của image-map |
Thiết lập CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử <map> với các giá trị mặc định sau:
map {
display: inline;
}
Chú thích: Nguồn ảnh W3School.
Mình có thể hỏi các thứ tự thông số toạ độ được hiểu như thế nào không, vì khi mình nhìn vào coords=”0,0,82,126″ không hiểu được chính xác cách tính vị trí.
Chào bạn, các chỉ số đó là vị trí tọa độ của hình chữ nhật bạn à. Cụ thể là x1,y1,x2,y2. Hình chữ nhật này có chiều rộng là 82 & chiều dài là 126.
Nếu nó có 3 thông số, thì thường chỉ hình tròn, với hai giá trị đầu chỉ vị trí tâm của hình tròn, giá trị còn lại là bán kính.