Đối tượng Area trong HTML DOM liên quan đến bản đồ hình ảnh (image map). Area đại diện cho khu vực có thể click bên trong bản đồ hình ảnh.
Đối tượng image giúp chúng ta tạo và truy cập phần tử <area> bên trong đối tượng. Chúng ta có thể thay đổi khu vực clickable bên trong map hoặc thay đổi hình dạng v.v. của bản đồ hình ảnh dựa trên đầu vào của người dùng. Nó cũng có thể được sử dụng để thao tác liên kết bên trong phần tử area.
Thuộc tính
Dưới đây là các thuộc tính cho đối tượng Area:
| Giá trị | Mô tả |
|---|---|
| alt | Để thiết lập hoặc trả về giá trị thuộc tính alt. |
| coords | Để thiết lập hoặc trả về thuộc tính coords của một area. |
| hash | Để thiết lập hoặc trả về phần anchor của giá trị thuộc tính href. |
| host | Để thiết lập hoặc trả về cả hostname và port của giá trị thuộc tính href. |
| hostname | Để thiết lập hoặc trả về phần hostname của giá trị thuộc tính href. |
| href | Để thiết lập hoặc trả về giá trị thuộc tính href của một area. |
| noHref | Để thiết lập hoặc trả về giá trị thuộc tính nohref của một area. Đã lỗi thời trong HTML5. |
| origin | Để trả về giao thức, hostname và port của giá trị thuộc tính href. |
| password | Để thiết lập hoặc trả về phần password của giá trị thuộc tính href. |
| pathname | Để thiết lập hoặc trả về phần pathname của giá trị thuộc tính href. |
| port | Để thiết lập hoặc trả về phần port của giá trị thuộc tính href. |
Ví dụ
Dưới đây là ví dụ về đối tượng area:
<!DOCTYPE html> <html> <body> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276px-New7Wonders.jpg" width="400" height="400" usemap="#7Wonders"> <map id="WonderWorld" name="7Wonders"> </map> <p>Click nút để tạo phần tử AREA với link đến "Thành phố Maya", một trong 7 kỳ quan mới của thế giới.</p> <button onclick="myWonder()">CLICK IT</button> <p id="SAMPLE"></p> <script> function myWonder() { var x = document.createElement("AREA"); x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city"); x.setAttribute("shape", "circle"); x.setAttribute("coords", "124,58,16"); document.getElementById("WonderWorld").appendChild(x); document.getElementById("SAMPLE").innerHTML = "Phần tử AREA đã được tạo, bạn có thể click vào Thành phố Maya."; } </script> </body> </html>
Kết quả
Ví dụ này sẽ cho kết quả sau:
Sau khi click nút CLICK IT:
Bây giờ khi bạn click vào “Thành phố Maya”, nó sẽ đưa bạn đến trang Wikipedia của họ.
Giải thích ví dụ:
Chúng ta đã nhúng một hình ảnh sử dụng thẻ <img> và chỉ định chiều rộng, chiều cao và id:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276px-New7Wonders.jpg" width="400" height="300" usemap="#7Wonders">
Sau đó tạo một map rỗng nơi chúng ta sẽ thêm hình ảnh, area và các thứ khác sau này:
<map id="WonderWorld" name="7Wonders"></map>
Tạo một nút tên CLICK IT sẽ thực thi hàm myWonder():
<button onclick="myWonder()">CLICK IT</button>
Hàm myWonder() trước tiên tạo một phần tử <area> và gán cho biến x. Thiết lập các thuộc tính như href, shape và coords. Cuối cùng thêm phần tử <area> liên kết với biến x vào bản đồ hình ảnh làm node con và hiển thị thông báo area element đã được tạo:
function myWonder() { var x = document.createElement("AREA"); x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city"); x.setAttribute("shape", "circle"); x.setAttribute("coords", "124,58,16"); document.getElementById("WonderWorld").appendChild(x); document.getElementById("SAMPLE").innerHTML = "Phần tử AREA đã được tạo, bạn có thể click vào Thành phố Maya."; }