Categories HTML

Thẻ area trong HTML

Ví dụ

Một bản đồ ảnh, với các khu vực có thể click:

<img src="https://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://kiencang.net/wp-content/uploads/2021/02/sun.gif" />
<area alt="Mercury" coords="90,58,3" shape="circle" href="https://kiencang.net/wp-content/uploads/2021/02/merglobe.gif" />
<area alt="Venus" coords="124,58,8" shape="circle" href="https://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ính Giá trị Mô tả
alt text Chỉ đị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
coords coordinates Chỉ định toạ độ của khu vực
download filename Chỉ định đích sẽ được tải khi người dùng click vào liên kết
href URL Chỉ định đích siêu liên kết cho khu vực
hreflang language_code Chỉ định ngôn ngữ của đích URL
media media query Chỉ định thiết bị mà URL được tối ưu hoá
nohref value Không hỗ trợ trong HTML5.
Chỉ định khu vực không có liên kết link
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à liên kết đích
shape default
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ở
type media_type Chỉ đị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.

Back to Top