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;
}
578
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Khắc phục lỗi mạng WiFi không hiển thị trên Windows 10
Hôm qua -
Cách viết số mũ trong Excel, viết chỉ số trên, chỉ số dưới trong Excel
Hôm qua -
Pantheon DTCL 7.5: Lên đồ, đội hình mạnh
Hôm qua -
Cách ẩn tin nhắn Telegram không cần xóa
Hôm qua -
Trải nghiệm Nothing Phone 1
Hôm qua 2 -
Black Friday là gì? Black Friday 2023 vào ngày nào?
Hôm qua -
Cách vô hiệu hóa BitLocker trong Windows 10
Hôm qua -
Cách khởi động và dừng các dịch vụ trong MS SQL Server
Hôm qua -
Cách cộng dặm Bông sen vàng
Hôm qua -
200+biệt danh cho người yêu hay và hài hước
Hôm qua 5