Thẻ area trong HTML

Bởi

Ví dụ

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

<img src="https://cdn.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://cdn.kiencang.net/wp-content/uploads/2021/02/sun.gif" />
<area alt="Mercury" coords="90,58,3" shape="circle" href="https://cdn.kiencang.net/wp-content/uploads/2021/02/merglobe.gif" />
<area alt="Venus" coords="124,58,8" shape="circle" href="https://cdn.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>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ínhGiá trịMô tả
alttextChỉ đị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
coordscoordinatesChỉ định toạ độ của khu vực
downloadfilenameChỉ định đích sẽ được tải khi người dùng click vào liên kết
hrefURLChỉ định đích siêu liên kết cho khu vực
hreflanglanguage_codeChỉ định ngôn ngữ của đích URL
mediamedia queryChỉ định thiết bị mà URL được tối ưu hoá
nohrefvalueKhông hỗ trợ trong HTML5.
Chỉ định khu vực không có liên kết link
relalternate
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
shapedefault
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ở
typemedia_typeChỉ đị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.

Bài viết liên quan:

  1. Thuộc tính data-* trong HTML Ví dụ một đoạn code sử dụng thuộc tính data-* để nhúng dữ liệu tuỳ chỉnh: Quạ Cá voi Khỉ Định nghĩa và cách sử dụng Thuộc tính data-* được sử...
  2. Thẻ footer trong HTML Ví dụ về khu vực footer trong tài liệu: Định nghĩa và cách dùng Thẻ <footer> dùng để định nghĩa phần chân trang của tài liệu hoặc một khu vực....
  3. Thẻ keygen trong HTML Ví dụ Một form với trường keygen: Kết quả: Tên người dùng: Mã hoá: Định nghĩa và cách dùng Thẻ <keygen> chỉ định một cặp khoá được tạo ra để...
  4. Thẻ var trong HTML Ví dụ Định dạng văn bản trong tài liệu: Kết quả: Biến Định nghĩa và cách dùng Thẻ <var> là thẻ cụm từ. Nó dùng để định nghĩa một biến....
  5. Cách dùng thẻ blockquote trong HTML Thẻ blockquote dùng để trích dẫn nội dung từ nguồn khác. Câu hỏi đầu tiên, nếu bạn không sử dụng blockquote khi trích dẫn thì có sao không? Câu trả...

Viết một bình luận