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;
}
646
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 đổi font chữ Zalo trên điện thoại
2 ngày -
Cách khôi phục bài viết đã ẩn trên Facebook bằng điện thoại, máy tính
Hôm qua 1 -
Hướng dẫn đổi ID Facebook, thay địa chỉ Facebook mới
2 ngày -
Top 10+ trang web tốt nhất để tải phụ đề cho phim
2 ngày -
Top 9 phần mềm giả lập PC trên Android
Hôm qua -
Những stt cảm động viết cho người yêu cũ
2 ngày 1 -
Huyền Thoại Hải Tặc - Hải Tặc Đại Chiến
-
Chuyển từ cơ số 2 sang cơ số 16
Hôm qua -
Chào tháng 6: Câu nói hay nhất về tháng 6, stt tháng 6 tràn ngập yêu thương
Hôm qua 2 -
Code Skibidi Tower Defense mới nhất và cách đổi code lấy thưởng
Hôm qua