HTML5: <area> & <map>
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
<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ụ
Khả năng tương thích trình duyệt
<area>
Đố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>
Đố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>