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ả:
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>
Có
Có
Có
Có
Có
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 _topframename
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.