HTML DOM Map Object: Interacting with Image Maps

The HTML DOM Map object provides an interface to interact with HTML <map> elements, which are used to define image maps. Image maps allow you to create clickable regions on an image, each leading to a different link. With JavaScript and the DOM, you can access and manipulate these image map elements to create dynamic and interactive web experiences. This guide explores how to use the Map object to manage <map> elements effectively.

What is the HTML <map> Element?

The HTML <map> element is used in conjunction with the <img> tag and its usemap attribute to create image maps. The <map> element defines the regions of the image that should be clickable and associates each region with a specific URL. Inside the <map> element, <area> elements specify the coordinates, shape, and link for each clickable region.

Purpose of the HTML DOM Map Object

The primary purpose of the HTML DOM Map object is to provide access to:

• Retrieve the name of the <map> element.
• Access the collection of <area> elements defined within the <map>.
• Dynamically modify the properties of the image map and its areas.

Getting Started with the HTML DOM Map Object

To work with the HTML DOM Map object, you first need to have a <map> element in your HTML document. Here’s a basic HTML structure demonstrating how to define an image map:

<img
  src="https://dummyimage.com/400x300/ccc/000&text=World+Map"
  alt="World Map"
  usemap="#worldmap"
/>

<map name="worldmap" id="worldmap">
  <area
    shape="rect"
    coords="0,0,100,150"
    href="https://en.wikipedia.org/wiki/North_America"
    alt="North America"
  />
  <area
    shape="circle"
    coords="250,150,50"
    href="https://en.wikipedia.org/wiki/Europe"
    alt="Europe"
  />
  <area
    shape="poly"
    coords="300,180,350,120,400,180"
    href="https://en.wikipedia.org/wiki/Asia"
    alt="Asia"
  />
</map>

In this structure:

• The <img> tag displays the image, and the usemap attribute references the <map> element’s name using #worldmap.
• The <map> tag with name="worldmap" defines the image map. It is important to also add an id="worldmap"
• Three <area> elements specify the clickable regions as a rectangle, a circle and a polygon. Each area includes coordinates, a link, and an alternative text.

Now, let’s use JavaScript to access this Map object using document.getElementById() or document.querySelector():

const mapElement = document.getElementById("worldmap");
console.log(mapElement);

This will output the map element in console.

Key Properties of the HTML DOM Map Object

The HTML DOM Map object exposes several properties that are crucial for interacting with the image map. Below is a table of these key properties:

Property	Type	Description
`name`	String	Returns the value of the `name` attribute of the `
`id`	String	Returns the value of the `id` attribute of the `
`areas`	HTMLCollection	Returns a live `HTMLCollection` of all ` ` elements within the `
`outerHTML`	String	Returns the outer HTML string representation of the map tag.
`innerHTML`	String	Returns the inner HTML string representation of the map tag i.e. all inner area tags.

Working with the HTML DOM Map Object: Examples

Let’s go through examples to understand how to use the Map object for interacting with image maps.

Accessing the Map Name and ID

You can retrieve the name and id of the <map> element using the name and id properties of the Map object.

<img
  src="https://dummyimage.com/400x300/eee/000&text=Another+Map"
  alt="Another Map"
  usemap="#anothermap"
/>
<map name="anothermap" id="anothermap">
  <area
    shape="rect"
    coords="10,10,200,100"
    href="https://example.com/region1"
    alt="Region 1"
  />
</map>

<div id="mapInfo"></div>

<script>
  const mapElement2 = document.getElementById("anothermap");
  const mapName = mapElement2.name;
  const mapId = mapElement2.id;
  document.getElementById(
    "mapInfo"
  ).innerHTML = `Map Name: ${mapName}, Map ID: ${mapId}`;
</script>

Output: The output above shows the result of the JavaScript that accessed and displayed the name and id properties of the <map> element within the designated div.

Accessing Area Elements

The areas property returns a live HTMLCollection of all <area> elements within the <map>. You can iterate through this collection to access each area individually:

<img
  src="https://dummyimage.com/400x300/dde/000&text=Another+Map+Again"
  alt="Another Map Again"
  usemap="#anothermapagain"
/>
<map name="anothermapagain" id="anothermapagain">
  <area
    shape="rect"
    coords="10,10,200,100"
    href="https://example.com/region1"
    alt="Region 1"
  />
  <area
    shape="circle"
    coords="250,150,50"
    href="https://example.com/region2"
    alt="Region 2"
  />
</map>
<ul id="areaList"></ul>

<script>
  const mapElement3 = document.getElementById("anothermapagain");
  const areaElements = mapElement3.areas;
  const areaList = document.getElementById("areaList");

  for (let i = 0; i < areaElements.length; i++) {
    const area = areaElements[i];
    const listItem = document.createElement("li");
    listItem.textContent = `Area ${i + 1}: Alt - ${area.alt}, href - ${area.href}`;
    areaList.appendChild(listItem);
  }
</script>

Output: The example above dynamically creates a list of area tags inside map and output the information.

Accessing innerHTML and outerHTML

You can retrieve innerHTML and outerHTML of the map object using the innerHTML and outerHTML property of the map element.

<img
  src="https://dummyimage.com/400x300/aaf/000&text=Yet+Another+Map"
  alt="Yet Another Map"
  usemap="#yetanothermap"
/>
<map name="yetanothermap" id="yetanothermap">
    <area
      shape="rect"
      coords="10,10,200,100"
      href="https://example.com/region1"
      alt="Region 1"
    />
     <area
      shape="circle"
      coords="250,150,50"
      href="https://example.com/region2"
      alt="Region 2"
    />
</map>
<pre id="mapHTML"></pre>

<script>
  const mapElement4 = document.getElementById("yetanothermap");
  const mapInnerHTML = mapElement4.innerHTML;
  const mapOuterHTML = mapElement4.outerHTML;
  const mapHTMLDisplay = document.getElementById("mapHTML");
  mapHTMLDisplay.textContent = `InnerHTML: \n ${mapInnerHTML} \n OuterHTML: \n ${mapOuterHTML}`;
</script>

Output: The example above shows how to access innerHTML and outerHTML of the map element.

Modifying Area Properties

You can also modify the properties of the area elements using javascript. Here is an example.

<img
  src="https://dummyimage.com/400x300/afa/000&text=Final+Map"
  alt="Final Map"
  usemap="#finalmap"
/>
<map name="finalmap" id="finalmap">
  <area
    shape="rect"
    coords="10,10,200,100"
    href="https://example.com/region1"
    alt="Region 1"
    id = "area1"
  />
</map>

<div id="modificationMsg"></div>

<script>
  const mapElement5 = document.getElementById("finalmap");
    const areaElements5 = mapElement5.areas;
    const area = areaElements5[0];
    area.href = "https://example.com/new-region";
    area.alt = "New Region";
    const modificationMsg = document.getElementById("modificationMsg");
    modificationMsg.textContent = `Modified area href is: ${area.href}, alt is ${area.alt}`;
</script>

Output: The example above displays the modified area’s href and alt properties in the output, demonstrating successful modification using the DOM.

Real-World Applications of the Map Object

The Map object is useful in scenarios where you need to:

• Create interactive maps with clickable regions for navigation or additional information.
• Implement dynamic image maps, changing links or areas based on user interaction or other dynamic data.
• Enhance user experience with image maps that respond to user inputs by highlighting or changing attributes on specific areas.
• Develop complex user interface elements by using a combination of map and area elements.

Browser Support

The HTML DOM Map object is supported by all modern browsers, making it a reliable tool for your web development projects.

| Browser | Support |
| —————- | ——- |
| Chrome | Yes |
| Safari | Yes |
| Firefox | Yes |
| Edge | Yes |
| Opera | Yes |
| Internet Explorer| Yes |

Note: While the Map object is widely supported, always test your implementation across different browsers to ensure consistent behavior. 🧪

Conclusion

The HTML DOM Map object provides powerful capabilities for accessing and manipulating image map elements. By understanding the properties of the Map object and its interactions with <area> elements, you can create dynamic and engaging web experiences. Use the provided examples as a starting point for crafting interactive image maps that improve the user experience of your websites. Happy coding! 🚀