HTML usemap Attribute

Posted in HTML Tutorial

Updated on Nov 19, 2024

By Mari Selvan

👁️ 69 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The usemap attribute in HTML is a powerful tool for creating image maps, allowing developers to define clickable areas within an image.

By associating an image with a map, you can designate specific regions that act as links to different destinations, providing an interactive and engaging user experience.

🎯 Purpose of usemap

The primary purpose of the usemap attribute is to connect an image with a client-side image map.

This attribute is typically applied to the <img> element and references a corresponding <map> element where the clickable areas are defined.

💎 Values

The usemap attribute accepts a value that is the ID of a <map> element.

The value should start with a hash symbol (#) followed by the ID of the map. For example:

usemap.html

Copied

<img src="example.jpg" alt="Example Image" usemap="#exampleMap">
<map name="exampleMap">
  <!-- Map areas defined here -->
</map>

🧠 How it Works

In this example, the usemap attribute is set to #exampleMap, indicating that the image is associated with the map named "exampleMap."

📄 Example

Let's look at a simple example of how to use the usemap attribute in an HTML document:

usemap.html

Copied

<img src="world-map.jpg" alt="World Map" usemap="#worldMap">
<map name="worldMap">
  <area shape="rect" coords="0,0,100,100" href="north-america.html" alt="North America">
  <area shape="rect" coords="100,0,200,100" href="europe.html" alt="Europe">
  <!-- Add more areas as needed -->
</map>

🧠 How it Works

In this example, the usemap attribute is set to #worldMap, connecting the image of a world map to a map with clickable areas for North America and Europe.

🔄 Dynamic Values with JavaScript

You can dynamically manipulate the usemap attribute using JavaScript, providing flexibility in response to user interactions or certain conditions. Here's a basic example:

usemap.html

Copied

<script>
  // Dynamically set usemap for an image
  function updateMap() {
    document.getElementById("dynamicImage").useMap = "#dynamicMap";
  }
</script>

<button onclick="updateMap()">Change Map</button>
<img id="dynamicImage" src="dynamic-map.jpg" alt="Dynamic Map" usemap="#defaultMap">
<map name="defaultMap">
  <!-- Default map areas defined here -->
</map>
<map name="dynamicMap">
  <!-- Updated map areas defined here -->
</map>

🧠 How it Works

In this script, clicking the Change Map button triggers the updateMap function, dynamically changing the usemap attribute for the image with the ID "dynamicImage."

🏆 Best Practices

Ensure that the <map> element referenced by the usemap attribute contains the necessary <area> elements with correct coordinates and destination links.
Test image maps thoroughly on different browsers to ensure consistent behavior.
Consider accessibility by providing alternative text for each clickable area defined within the map.