Thẻ area 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" />

Kết quả:

Planets Sun Mercury Venus

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.

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

Trình duyệt hỗ trợ

Phần tử Chrome IE FireFox Safari Opera
<area>

Sự khác nhau giữa HTML 4.01 và HTML5

HTML5 có một số thuộc tính mới và một số thuộc tính HTML 4.01 không được tiếp tục hỗ trợ nữa.

Sự khác nhau giữa HTML và XHTML

Trong HTML, thẻ <area> không cần thẻ đóng.

Trong XHTML, thẻ <area> phải được đóng đúng cách.

Các thuộc tính

Thuộc tínhGiá trịMô tả
alttextChỉ định văn bản thay thế cho khu vực (giống kiểu alt của ảnh). Yêu cầu bắt buộc nếu thuộc tính href tồn tại
coordscoordinatesChỉ định toạ độ của khu vực
downloadfilenameChỉ định đích sẽ được tải khi người dùng click vào liên kết
hrefURLChỉ định đích siêu liên kết cho khu vực
hreflanglanguage_codeChỉ định ngôn ngữ của đích URL
mediamedia queryChỉ định thiết bị mà URL được tối ưu hoá
nohrefvalueKhông hỗ trợ trong HTML5.
Chỉ định khu vực không có liên kết link
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à liên kết đích
shapedefault
rect
circle
poly
Chỉ định hình dạng của khu vực được chọn (hình chữ nhật – rect; hình tròn – circle; hình đa giác – poly)
target_blank
_parent
_self
_top
framename
Chỉ định nơi liên kết URL được mở
typemedia_typeChỉ định kiểu media của liên kết đich URL

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ử <area> với các giá trị mặc định sau:

area {
display: none;
}

Chú thích: Nguồn ảnh W3School.

Leave a Comment