Định nghĩa và sử dụng
- Tag <area /> xác định một vùng bên trong image-map.
Image-map là hình trong đó có những khu vực có thể click được. - Các <area /> luôn được lồng bên trong tag <map>
Sự khác nhau giữa HTML và XHTML
| HTML4.01 | XHTML1.0 | XHTML1.1 |
|---|---|---|
| Không cần kết thúc tag <area> | Cần khoảng trắng và ký tự "/" để kết thúc tag <area /> | Không hỗ trợ |
Cấu trúc
<map name="tên map">
<area shape="hình dạng map" coords="tọa độ map" href="liên kết" alt="" />
</map>
Ví dụ
Html viết:
<p><img src="images/img_planet.gif" alt="planet" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="100,80,52" href="tag_area.php" alt="Planet" />
</map></p>
Link chỉ trong khu vực <area /> (bên trong đường viền của hành tinh)
Hiển thị trình duyệt:
Trình duyệt hỗ trợ
Tag <area /> được hỗ trợ trong đa số các trình duyệt.
Thuộc tính
Cách sử dụng: <area thuoctinh="giatri" />
Thuộc tính bắt buộc
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| alt | Text | alt="Đây là alt" | Xác định text alternate cho area. |
Thuộc tính tùy chọn
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| coords | Tọa độ | coords="0,111,122" | Xác định tọa độ của area. |
| href | URL | href="index.html" | Xác định URL đến của một liên kết trong một area. |
| nohref | nohref | nohref="nohref" | Xác định rằng một area không có liên kết liên quan. Không hỗ trợ trong phần lớn trình duyệt |
| shape | default rect circle poly |
shape="rect" | Xác định hình dạng của area. |
| target | _blank _parent _self _top |
target="_blank" | Xác định nơi để mở trang liên kết quy định tại các thuộc tính href. Không được hỗ trợ trong DTD Strict |
Thuộc tính tổng quát (xem thêm)
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| accesskey | Ký tự | accesskey="g" | Xác định một phím tắc để truy cập vào một thành phần. |
| class | Tên class | class="section" | Tên class |
| dir | rtl ltr |
dir="rtl" | Xác định hướng văn bản cho các nội dung trong một thành phần. |
| id | Tên id | id="layout" | Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML |
| lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần. |
| style | Kiểu định dạng | style="color: red" | Xác định một định dạng cho một thành phần. |
| tabindex | Số | tabindex="5" | Xác định thứ tự tab của một thành phần. |
| title | Text | title="Đây là title" | Xác định thêm thông tin cho thành phần. |
| xml:lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. |
Thuộc tính sự kiện
Không được hỗ trợ trong DTD Strict
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| onclick | Code script | onclick="code" | Script chạy khi click chuột. |
| ondblclick | Code script | ondblclick="code" | Script chạy khi double click chuột. |
| onmousedown | Code script | onmousedown="code" | Script chạy khi button chuột được nhấn. |
| onmousemove | Code script | onmousemove="code" | Script chạy khi di chuyển con trỏ chuột. |
| onmouseout | Code script | onmouseout="code" | Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần. |
| onmouseover | Code script | onmouseover="code" | Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần. |
| onmouseup | Code script | onmouseup="code" | Script chạy khi button chuột được thả ra. |
| onkeydown | Code script | onkeydown="code" | Script chạy khi nút trên bàn phím được nhấn. |
| onkeypress | Code script | onkeypress="code" | Script chạy khi nút trên bàn phím được nhấn và thả ra. |
| onkeyup | Code script | onkeyup="code" | Script chạy khi nút trên bàn phím được thả ra. |