Thẻ HTML <area>

Đị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 ChromeMS EdgeFirefoxSafariOpera

Các thuộc tính

Thuộc tínhGiá trịMô tả
alttextChỉ đị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
coordscoordinatesChỉ định tọa độ của khu vực
downloadfilenameChỉ đị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
hrefURLChỉ định mục tiêu siêu liên kết cho khu vực
hreflanglanguage_codeChỉ định ngôn ngữ của URL đích
mediamedia queryChỉ định phương tiện/thiết bị mà URL mục tiêu được tối ưu hóa cho
referrerpolicyno-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
relalternate
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
shapedefault
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
typemedia_typeChỉ đị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>

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <area> với các giá trị mặc định sau:

area {
  display: none;
}
Chủ Nhật, 22/05/2022 10:27
522 👨 293
0 Bình luận
Sắp xếp theo