HTML5: <area> & <map>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tổng quan

Thẻ <area> dùng để tạo vùng ảnh (hot-spot region) liên kết trong một ảnh được dùng làm bản đồ ảnh (image-map). <area> là thẻ con của thẻ <map>.

Để sử dụng được thẻ <area> cần phải kết hợp với ít nhất hai thẻ nữa là thẻ <img> và thẻ <map>.

Nhóm nội dung

<area> : Flow, Phrasing.

<map> : Flow, Phrasing, Palpable.

Nội dung được phép

<area> : không chứa nội dung.

<map> : Transparent.

Thẻ đóng

<area> : là thẻ đơn (<area />).

<map> : bắt buộc phải bao gồm thẻ mở <map> và thẻ đóng </map>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

<area> : HTMLAreaElement.

<map> : HTMLMapElement.

Thuộc tính

<area> và <map> bao gồm Các thuộc tính Global.

Đối với <area>:

alt

Trong HTML4 thuộc tính này là cần thiết, nhưng có thể chứa một chuỗi rỗng. Còn trong HTML5 alt chỉ cần thiết khi thuộc tính href được sử dụng. alt cũng giúp ích cho người khiếm thị khi họ sử dụng các công cụ chuyên dụng để đọc trang web của bạn. Xin xem thêm thông tin về alt tại đây.

coords

Thuộc tính này chứa một tập các giá trị dùng để xác định toạ độ của vùng hot-spot. Số lượng cũng như ý nghĩa của các giá trị trong coords phụ thuộc vào giá trị của thuộc tính shape. Cụ thể, nếu giá trị là 'rect' (rectangle-hình chữ nhật) thì coords gồm hai cặp toạ độ thể hiện góc trên trái (top-left) và dưới phải (bottom-right) của hình chữ nhật; nếu giá trị của shape là 'circle' (hình tròn) thì coords sẽ gồm 3 giá trị, trong đó hai giá trị đầu là toạ độ tâm của đường tròn, giá trị thứ 3 là bán kính của đường tròn; nếu giá trị của shape là 'poly' (polygon-đa điểm) thì coords sẽ gồm các cặp giá trị trong đó mỗi cặp là toạ độ của một điểm. Trong HTML4 thì các giá trị của coords có thể có đơn vị px hoặc %, còn trong HTML5 thì các giá trị có đơn vị CS pixel.

href

Thuộc tính này chứa một URL thể hiện đích đến của hot-spot khi người dùng click chuột vào hot-spot. Trong HTML4, thuộc tính này hoặc thuộc thuộc tính nohref là bắt buộc phải được sử dụng trong <area>, còn trong HTML5 thì bạn có thể bỏ qua (tức là hot-spot do <area> tạo ra không đại diện cho một siêu liên kết nào).

name

Dùng để đặt tên cho hot-spot.

nohref

Dùng để chỉ ra rằng không có siêu liên kết nào tồn tại trên hot-spot (trong HTML5 chỉ cần dùng href là đủ).

shape

Thuộc tính này dùng để chỉ định hình dạng của hot-spot. Thuộc tính này có 3 giá trị cơ bản là rect (chữ nhật), circle (tròn) và poly (đa điểm).

Ngoài ra, <area> còn có các thuộc tính cơ bản khác gồm: download , hreflang , media , rel , target.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="Nguồn_ảnh" usemap="#Map" border="1" />
<map name="Map" id="Map">
<area shape="rect" coords="2,2,440,161" href="http://v1study.com" target="_blank" alt="v1study.com" title="v1study.com" />
<area shape="circle" coords="650,176,151" href="http://demo.v1study.com" target="_blank" alt="demo.v1study.com" title="demo.v1study.com" />
<area shape="poly" coords="209,170,19,194,24,309,249,321,498,291,444,194" href="http://dangtranlong.blogspot.com" target="_blank" alt="dangtranlong.blogspot.com" title="dangtranlong.blogspot.com" />
</map>
</body>
</html>
 

Khả năng tương thích trình duyệt

<area>

AnchorĐối với Máy tính

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Có)

(Có) (Có) (Có) (Có)

Đối với Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

?

?

?

?

?

<map>

AnchorĐối với Máy tính

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Hỗ trợ cơ bản

1.0

1.0 (1.7 trở xuống) [1][2]

(Có)

1.0

1.0

Đối với Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

1.0

1.0 (1.0) [1][2]

(Có)

1.0

1.0

Xem thêm

· <img>

» Tiếp: <b> & <strong>
« Trước: <applet>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!