วัตถุพื้นที่ HTML DOM

ออบเจ็กต์พื้นที่ HTML DOM เชื่อมโยงกับการแมปรูปภาพใน HTML โดยทั่วไป พื้นที่จะแสดงพื้นที่ที่สามารถคลิกได้ภายในแผนผังรูปภาพ

วัตถุรูปภาพช่วยเราในการสร้างและเข้าถึงองค์ประกอบ ภายในวัตถุ เราสามารถเปลี่ยนภูมิภาคที่คลิกได้ภายในแผนที่หรือเปลี่ยนรูปร่าง ฯลฯ ของแผนที่รูปภาพตามอินพุตของผู้ใช้ นอกจากนี้ยังสามารถใช้เพื่อจัดการลิงก์ภายในองค์ประกอบพื้นที่ได้

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของ Area Object -

ค่า	คำอธิบาย
alt	การตั้งค่าหรือคืนค่าแอตทริบิวต์ alt
พิกัด	การตั้งค่าหรือส่งคืนแอตทริบิวต์สายไฟของพื้นที่
แฮช	การตั้งค่าหรือส่งคืนส่วนสมอของค่าแอตทริบิวต์ href
โฮสต์	การตั้งค่าหรือส่งคืนทั้งชื่อโฮสต์และส่วนพอร์ตของค่าแอตทริบิวต์ href
ชื่อโฮสต์	การตั้งค่าหรือส่งคืนส่วนชื่อโฮสต์ของค่าแอตทริบิวต์ href
href	การตั้งค่าหรือคืนค่าแอตทริบิวต์ href ของพื้นที่
noHref	การตั้งค่าหรือคืนค่าของแอตทริบิวต์ nohref ของพื้นที่ เลิกใช้งานใน HTML5
ต้นกำเนิด	ในการส่งคืนโปรโตคอล ชื่อโฮสต์ และส่วนพอร์ตของค่าแอตทริบิวต์ href
รหัสผ่าน	การตั้งค่าหรือส่งคืนส่วนรหัสผ่านของค่าแอตทริบิวต์ href
ชื่อพาธ	การตั้งค่าหรือส่งคืนส่วนชื่อพาธของค่าแอตทริบิวต์ href
พอร์ต	การตั้งค่าหรือส่งคืนส่วนพอร์ตของค่าแอตทริบิวต์ href

ตัวอย่าง

ให้เราดูตัวอย่างของพื้นที่วัตถุ −

<!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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

วัตถุพื้นที่ HTML DOM

หลังจากคลิกที่ปุ่ม CLICK IT -

วัตถุพื้นที่ HTML DOM

ตอนนี้เมื่อคุณคลิกที่ “เมืองมายา” ระบบจะพาคุณไปยังหน้า Wikipedia

ในตัวอย่างข้างต้น −

เราได้รวมรูปภาพโดยใช้แท็กและระบุความกว้าง ความสูง และรหัส

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

จากนั้นเราก็สร้างแผนที่ว่างซึ่งเราจะเพิ่มรูปภาพ พื้นที่ และสิ่งอื่น ๆ ในภายหลัง -

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

เราได้สร้างปุ่มชื่อ CLICK IT ซึ่งจะเรียกใช้ฟังก์ชัน myWonder()

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

ฟังก์ชัน myWonder() จะสร้างองค์ประกอบขึ้นมาก่อนแล้วกำหนดให้กับตัวแปร x ตั้งค่าคุณลักษณะต่างๆ เช่น href รูปร่างและสายไฟ ในที่สุดเราก็เพิ่มองค์ประกอบที่เกี่ยวข้องกับตัวแปร x ลงในแผนที่รูปภาพเป็นโหนดย่อยและแสดงองค์ประกอบพื้นที่ที่สร้างขึ้นและตอนนี้คุณสามารถคลิกที่ "เมืองมายา" ภายในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้ 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.";
}