Đối tượng vùng DOM HTML

Đối tượng Vùng DOM HTML được liên kết với bản đồ hình ảnh trong HTML. Về cơ bản, khu vực đại diện cho khu vực có thể nhấp bên trong bản đồ hình ảnh.

Đối tượng hình ảnh giúp chúng tôi tạo và truy cập phần tử

Thuộc tính

Sau đây là các thuộc tính cho Đối tượng vùng -

Giá trị	Mô tả
alt	Để đặt hoặc trả về giá trị thuộc tính alt.
coords	Để thiết lập hoặc trả về các thuộc tính dây của một khu vực.
băm	Để đặt hoặc trả về phần neo của giá trị thuộc tính href.
máy chủ lưu trữ	Để đặt hoặc trả về cả tên máy chủ và phần cổng của giá trị thuộc tính href.
tên máy chủ	Để đặt hoặc trả lại phần tên máy chủ của giá trị thuộc tính href.
href	Để đặt hoặc trả về giá trị của thuộc tính href của một khu vực.
noHref	Để đặt hoặc trả về giá trị của thuộc tính nohref của một khu vực. Không được chấp nhận trong HTML5.
nguồn gốc	Để trả về giao thức, tên máy chủ và một phần cổng của giá trị thuộc tính href.
mật khẩu	Để đặt hoặc trả lại phần mật khẩu của giá trị thuộc tính href.
tên đường dẫn	Để đặt hoặc trả lại phần tên đường dẫn của giá trị thuộc tính href.
cổng	Để đặt hoặc trả lại phần cổng của giá trị thuộc tính href.

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng khu vực -

<!DOCTYPE html>
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</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 = "The AREA element was created, and
      you can now click on Maya City.";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng vùng DOM HTML

Sau khi nhấp vào nút CLICK IT -

Đối tượng vùng DOM HTML

Bây giờ khi bạn nhấp vào “thành phố Maya”, nó sẽ đưa bạn đến trang Wikipedia của họ.

Trong ví dụ trên -

Chúng tôi đã bao gồm một hình ảnh bằng cách sử dụng thẻ và chỉ định chiều rộng, chiều cao và id của nó.

<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">

Sau đó, chúng tôi đã tạo một bản đồ trống, nơi chúng tôi sẽ thêm hình ảnh, khu vực và những thứ khác sau -

<map id="WonderWorld" name="7Wonders"></map>

Sau đó, chúng tôi đã tạo một nút có tên CLICK IT sẽ thực thi hàm myWonder ().

<button onclick="myWonder()">CLICK IT</button>

Đầu tiên, hàm myWonder () tạo một phần tử và gán nó cho biến x. Đặt các thuộc tính khác nhau cho nó như href, hình dạng và dây. Cuối cùng, chúng tôi nối phần tử được liên kết với biến x vào bản đồ hình ảnh dưới dạng nút con và cũng hiển thị phần tử khu vực đã tạo và bây giờ bạn có thể nhấp vào “Thành phố Maya” bên trong đoạn có id “Mẫu” bằng cách sử dụng innerHTML -

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 = "The AREA element was created, and
   you can now click on Maya City.";
}