Thẻ map trong HTML

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.