Thẻ HTML <area>

Hà Nguyễn

Định nghĩa và cách sử dụng

Thẻ <area> xác định một khu vực bên trong bản đồ hình ảnh (bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp được).

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Các phần tử <area> luôn được lồng vào bên trong thẻ <map>.

Lưu ý: Thuộc tính usemap trong <img> được liên kết với thuộc tính tên của phần tử <map> và tạo mối quan hệ giữa hình ảnh và bản đồ.

Hỗ trợ trình duyệt

Phần tử < area >	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử < area >	Có	Có	Có	Có	Có

Các thuộc tính

Thuộc tính	Giá trị	Mô tả
alt	text	Chỉ định một văn bản thay thế cho khu vực. Bắt buộc nếu có thuộc tính `href`
coords	coordinates	Chỉ định tọa độ của khu vực
download	filename	Chỉ định rằng mục tiêu sẽ được tải xuống khi người dùng nhấp vào siêu liên kết
href	URL	Chỉ định mục tiêu siêu liên kết cho khu vực
hreflang	language_code	Chỉ định ngôn ngữ của URL đích
media	media query	Chỉ định phương tiện/thiết bị mà URL mục tiêu được tối ưu hóa cho
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Chỉ định thông tin liên kết giới thiệu nào sẽ gửi cùng với liên kết
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Chỉ định mối quan hệ giữa tài liệu hiện tại và URL đích
shape	default rect circle poly	Chỉ định hình dạng của khu vực
target	_blank _parent _self _top framename	Chỉ định nơi để mở URL mục tiêu
type	media_type	Chỉ định loại media của URL mục tiêu

Thuộc tính Global

Thẻ <area> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <area> cũng hỗ trợ các thuộc tính sự kiện trong HTML.

Các ví dụ khác

Một bản đồ hình ảnh khác, với các khu vực có thể nhấp:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>