HTML DOM Area Object: Accessing and Manipulating Area Elements

The HTML DOM area object represents an <area> element in HTML. The <area> element defines a specific area within an image map, which allows you to create clickable regions on an image. This article provides a comprehensive guide on how to access and manipulate these area elements using JavaScript.

What is the HTML area Object?

The HTML area object is part of the Document Object Model (DOM). It enables developers to dynamically interact with <area> elements through JavaScript. Using this object, you can access and modify attributes, listen for events, and programmatically handle user interactions on these clickable regions.

Purpose of the HTML area Object

The primary purpose of the area object is to allow you to:

• Access Area Elements: Retrieve <area> elements from the HTML document.
• Modify Area Attributes: Dynamically change attributes like href, alt, coords, shape, and target.
• Handle Events: Listen for events such as click, mouseover, and mouseout on area elements.
• Create Interactive Image Maps: Develop interactive interfaces within images.

Accessing Area Elements

To interact with an <area> element, you first need to access it using JavaScript. You can do this using several DOM methods:

1. getElementById(): Access an <area> element by its unique ID.
2. getElementsByTagName(): Retrieve a collection of all <area> elements in the document.
3. querySelectorAll(): Select <area> elements based on CSS selectors.

Example 1: Accessing an Area Element by ID

<img
  src="https://dummyimage.com/300x200/000/fff"
  alt="Image with clickable areas"
  usemap="#myMap"
/>
<map name="myMap">
  <area
    id="area1"
    shape="rect"
    coords="0,0,100,100"
    href="https://codelucky.com"
    alt="Area 1"
    target="_blank"
  />
  <area
    id="area2"
    shape="circle"
    coords="200,100,50"
    href="https://www.example.com"
    alt="Area 2"
    target="_blank"
  />
</map>
<p id="output1"></p>

<script>
  const area1_ele = document.getElementById("area1");
  const output_area1 = document.getElementById("output1");
  if (area1_ele) {
    output_area1.textContent = `Href of Area 1: ${area1_ele.href}`;
  }
</script>

Output:

Href of Area 1: https://codelucky.com/

Explanation:

• The getElementById("area1") method retrieves the <area> element with the ID area1.
• We check if the element exists before attempting to access its properties.
• The href property of the area object is then accessed, and its value is displayed in the paragraph element with the ID output1.

Example 2: Accessing All Area Elements by Tag Name

<img
  src="https://dummyimage.com/300x200/000/fff"
  alt="Image with clickable areas"
  usemap="#myMap2"
/>
<map name="myMap2">
  <area shape="rect" coords="0,0,100,100" href="#" alt="Area A" />
  <area shape="circle" coords="200,100,50" href="#" alt="Area B" />
  <area shape="poly" coords="50,50,150,50,100,150" href="#" alt="Area C" />
</map>
<ul id="output2"></ul>

<script>
  const areas_all = document.getElementsByTagName("area");
  const output_ul = document.getElementById("output2");
  for (let i = 0; i < areas_all.length; i++) {
    const area_obj = areas_all[i];
    const listItem = document.createElement("li");
    listItem.textContent = `Area ${i + 1}: Alt: ${area_obj.alt}, Shape: ${
      area_obj.shape
    }`;
    output_ul.appendChild(listItem);
  }
</script>

Output:

• Area 1: Alt: Area A, Shape: rect
• Area 2: Alt: Area B, Shape: circle
• Area 3: Alt: Area C, Shape: poly

Explanation:

• The getElementsByTagName("area") method retrieves a live HTMLCollection of all <area> elements.
• The code iterates through this collection, and for each <area> element, it extracts the alt and shape properties.
• The extracted information is then appended to the ul element with the ID output2 as list items.

Example 3: Accessing Area Elements Using querySelectorAll()

<img
  src="https://dummyimage.com/300x200/000/fff"
  alt="Image with clickable areas"
  usemap="#myMap3"
/>
<map name="myMap3">
  <area
    class="clickable"
    shape="rect"
    coords="0,0,100,100"
    href="#"
    alt="Region 1"
  />
  <area
    class="clickable"
    shape="circle"
    coords="200,100,50"
    href="#"
    alt="Region 2"
  />
  <area shape="poly" coords="50,50,150,50,100,150" href="#" alt="Region 3" />
</map>
<div id="output3"></div>

<script>
  const clickable_areas = document.querySelectorAll("area.clickable");
  const output_div = document.getElementById("output3");
  clickable_areas.forEach((area_ele, index) => {
    const para = document.createElement("p");
    para.textContent = `Clickable Area ${index + 1}: Alt: ${area_ele.alt}`;
    output_div.appendChild(para);
  });
</script>

Output:

Explanation:

• The querySelectorAll("area.clickable") method retrieves a NodeList of all <area> elements that have the class clickable.
• The code uses forEach to loop through the selected elements, and for each element, it extracts the alt property.
• This is then displayed in the div with the ID output3.

Important Area Attributes

Here is a list of essential attributes you can access and modify via the area object:

Attribute	Type	Description
`href`	String	Specifies the URL of the link.
`alt`	String	Provides alternative text for the area, essential for accessibility.
`coords`	String	Defines the coordinates of the area, specific to its shape.
`shape`	String	Specifies the shape of the area (`rect`, `circle`, `poly`, or `default`).
`target`	String	Specifies where to open the linked document. Common values are `_blank`, `_self`, `_parent`, and `_top`.
`download`	String	Specifies that the target will be downloaded when a user clicks on the hyperlink.
`rel`	String	Specifies the relationship between the current document and the linked document.

Modifying Area Attributes

You can modify the attributes of an <area> element directly using JavaScript.

Example: Modifying the href attribute

<img
  src="https://dummyimage.com/300x200/000/fff"
  alt="Image with clickable areas"
  usemap="#myMap4"
/>
<map name="myMap4">
  <area id="areaToChange" shape="rect" coords="0,0,100,100" href="#" alt="Area" />
</map>
<button id="changeHrefButton">Change Href</button>
<p id="output4"></p>

<script>
  const area_change = document.getElementById("areaToChange");
  const change_button = document.getElementById("changeHrefButton");
  const output_para = document.getElementById("output4");

  change_button.addEventListener("click", () => {
    area_change.href = "https://www.wikipedia.org";
    output_para.textContent = `Href changed to: ${area_change.href}`;
  });
</script>

Output:

Href changed to: https://www.wikipedia.org

Explanation:

• The code selects the <area> element using its ID and then sets href to https://www.wikipedia.org after the button is clicked.
• The textContent is updated to show the new URL of the area.

Handling Events on Area Elements

You can also add event listeners to <area> elements to handle user interactions.

Example: Handling a click event

<img
  src="https://dummyimage.com/300x200/000/fff"
  alt="Image with clickable areas"
  usemap="#myMap5"
/>
<map name="myMap5">
  <area
    id="clickableArea"
    shape="rect"
    coords="0,0,100,100"
    href="#"
    alt="Clickable Region"
  />
</map>
<p id="output5">Click the area above</p>
<script>
  const click_area = document.getElementById("clickableArea");
  const output_click = document.getElementById("output5");
  click_area.addEventListener("click", (event) => {
    event.preventDefault();
    output_click.textContent = "Area was clicked!";
  });
</script>

Output:

Area was clicked!

Explanation:

• The addEventListener() method attaches a click event listener to the <area> element.
• When the area is clicked, the callback function is executed, which prevent default behavior of going to href and update the content of the element with the ID output5.

Real-World Applications

The area object is widely used in:

• Interactive Maps: Creating clickable regions on maps for navigation or data display.
• Image Galleries: Implementing interactive image galleries with specific clickable zones.
• Game Development: Defining clickable areas for interactive elements in web-based games.
• Product Spotlights: Creating interactive hotspots on product images to showcase features.

Browser Support

The HTML area object is supported in all modern web browsers, ensuring broad compatibility.

Note: Always test your code across different browsers and devices to ensure a consistent user experience. ✅

Conclusion

The HTML DOM area object provides powerful capabilities for handling interactive image maps in HTML documents. By using JavaScript to access, modify, and handle events on <area> elements, developers can create engaging and dynamic web interfaces. This guide has provided a foundation for effectively using the area object in your web development projects. Happy coding! 🎉