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 Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
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>
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;
}
640
Bài trước
Bạn nên đọc
Xác thực tài khoản!
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
Số điện thoại chưa đúng định dạng!
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi

Cũ vẫn chất
-
Cách khắc phục lỗi Apple CarPlay không hoạt động
Hôm qua -
Hướng dẫn kết nối máy tính với máy chiếu, kết nối laptop với máy chiếu
Hôm qua 2 -
Mất quyền Admin trên Windows 10, đây là cách khắc phục
Hôm qua -
Đáp án Brain Out, giải Brain Out level 1 đến level 255
Hôm qua -
3 cách tắt tường lửa Windows 11
Hôm qua -
6 cách mở Computer/System Properties trong Windows 10
Hôm qua -
Chụp ảnh và soi gương cái nào sẽ cho bạn hình ảnh chính xác nhất?
Hôm qua -
13 câu lệnh SQL quan trọng Programmer nào cũng cần biết
Hôm qua -
Cách sắp xếp ảnh chồng lên nhau trong Word
Hôm qua -
Làm sao để tải phụ đề video trên Youtube nhanh chóng và đơn giản?
Hôm qua