How to Create an Image Map

What Is an Image Map?

An image map is a feature in HTML that allows a single image to have multiple clickable areas, each linking to different destinations. This is particularly useful for creating interactive graphics where different parts of the image serve as gateways to different web pages. For example, a city map could have each region as a clickable area, leading users to specific pages about those regions.

See the code example below. The img tag specifies the image to be used for the map, and the usemap attribute links this image to a map element named citymap. Inside the map element, area elements define clickable regions on the image. Each area has a specific shape (rectangle, circle, polygon), coordinates for position and size, a hyperlink (href), and an alt attribute.

<img src="city-map.png" alt="World Map" usemap="#citymap" style="width:600px; height:400px;">
<map name="citymap">
  <area shape="rect" coords="50,50,150,150" href="https://www.example.com/region1" alt="Region 1">
  <area shape="circle" coords="200,200,50" href="https://www.example.com/region2" alt="Region 2">
  <area shape="poly" coords="300,150,350,250,250,250" href="https://www.example.com/region3" alt="Region 3">
</map>

Image maps make it possible to combine detailed imagery with an interactive experience, enhancing the user’s engagement with the content. They can function as a user interface component, allowing for an intuitive and visually appealing navigation system. However, their implementation requires a combination of HTML and JavaScript to manage the interactivity and ensure compatibility across different browsers and devices.

This is part of a series of articles about image optimization.

In this article:

• HTML Elements Used to Create Image Maps
  • img: Specifies the Image to be Included in the Map
  • map: Defines the Map of Clickable Areas
  • area: Used Within the Map Element to Define Clickable Areas
• Pros and Cons of Image Maps
• Creating an Image Map with HTML and JS
  • Step 1: Create an Image Map
  • Step 2: Add Clickable Areas
  • Wrapping Up

HTML Elements Used to Create Image Maps

Let’s review each of the HTML elements used in an image map in more detail.

img: Specifies the Image to be Included in the Map

First, we start with the image that we’ll use for a map. The img element is used to embed the image that will contain the clickable areas. Within the img tag, the usemap attribute links the image to a map element, which defines the clickable regions. The value of the usemap attribute must match the name attribute of the associated map element, which then creates a link between the image and its interactive areas.

<img src="city-map.png" alt="World Map" usemap="#citymap" style="width:600px; height:400px;">

Like in a regular image, the src attribute specifies the path to the image file in addition to the usemap attribute.

map: Defines the Map of Clickable Areas

After we’ve displayed the image, we’ll be mapping, and we need to define the map itself. The map element defines the structure of our image map, serving as a container for the area elements.

The map element requires a name attribute, which must correspond to the value of the usemap attribute in the associated img tag. This ensures the clickable areas defined within the map element are correctly applied to the intended image.

<map name="citymap">
  <area ...>
  <area ...>
  <area ...>
</map>

area: Used Within the Map Element to Define Clickable Areas

Finally, the area element is where the interactive functionality of an image map is defined. Each area element specifies a clickable region within the image using the following attributes:

• shape defines the geometry of the clickable area (rectangle, circle, or polygon)
• coords specifies the coordinates of the area within the image
• href indicates the URL to which the user will be directed upon clicking the area
• alt provides alternative text for users who cannot view the image.

<map name="citymap">
  <area shape="rect" coords="50,50,150,150" href="https://www.example.com/region1" alt="Region 1">
  <area shape="circle" coords="200,200,50" href="https://www.example.com/region2" alt="Region 2">
  <area shape="poly" coords="300,150,350,250,250,250" href="https://www.example.com/region3" alt="Region 3">
</map>

Pros and Cons of Image Maps

Image maps have long been a useful tool, allowing for multiple clickable areas within a single image. However, like any technology, they come with both advantages and drawbacks. Here’s a quick look at the pros and cons of using image maps:

Pros of image maps:

• Interactive and Engaging – Image maps turn static images into interactive experiences, engaging users by allowing them to explore different parts of an image.
• Flexibility – They offer the flexibility to define various shapes (rectangles, circles, polygons) as clickable areas, enabling complex image layouts.
• Space-saving – By embedding multiple links within a single image, image maps save valuable screen real estate, making them ideal for compact designs.
• Efficiency – Image maps reduce the number of HTTP requests by combining multiple interactive elements into one image.
• Simplified HTML – They can combine several links into a single image tag, making your HTML code cleaner.
• Visual Appeal – An image map offers a visually engaging way to present complex information, such as geographical maps or detailed product images.

Cons of image maps:

• Complex to Create and Maintain – Crafting image maps, especially with multiple or intricate areas, requires careful planning and testing, making them more complex than standard links.
• Responsiveness Issues – Making image maps responsive can be challenging, as the coordinates of clickable areas may not scale correctly on different devices or screen sizes.
• Loading Times – High-resolution images used for image maps can increase page loading times, potentially affecting user experience and SEO.
• Accessibility Issues – Can be difficult for screen readers to interpret, potentially hindering accessibility for users with disabilities.
• Responsive Design Challenges – Maintaining usability across different screen sizes and devices is harder without additional CSS and JavaScript.
• SEO Limitations – Text within image maps isn’t crawled by search engines, potentially affecting SEO performance.

Creating an Image Map with HTML and JS

Now that we know what an image map is, let’s make one! Adding one to your website is simple, all it takes is some HTML

Step 1: Create an Image Map

The very first thing we need to do is add the usemap tag to the image we’ll be mapping over.

Then, let’s add the <map> element under it. The name attribute <map name="myimagemap"> links this element to the image. The name attribute’s value must match the image’s usemap attribute (<img>).

Image Credit: Pixabay

Step 2: Add Clickable Areas

Use the <area> element to define a clickable area. If you remember from earlier, there are four values that can be used to define an area’s shape: rect for a rectangular area, circle for a circular area, poly for a polygon, and default to cover the whole region.

In this example, we’ll create a rectangular area with the coordinates 469:121, representing the top left corner, and 769:725, representing the bottom right corner. It should look like this:

<area shape="rect" coords="469, 121, 769, 725" href="phone.htm">

These coordinates define the area within the image where the user can click to go to the page “phone.htm.”

Wrapping Up

Image maps are a powerful HTML tool that enables developers to create interactive, clickable areas within a single image. They streamline the user experience by reducing the need for multiple images and links, making web pages more efficient and visually engaging. However, optimizing image maps for responsiveness and accessibility remains a challenge. By understanding both the benefits and limitations, developers can effectively leverage image maps to enhance their web projects.

For those looking to further optimize their media, Cloudinary offers a robust solution. With Cloudinary, you can easily manage and transform images at scale, ensuring optimal performance and user experience.

Optimize, transform, and manage your media assets like a pro with Cloudinary. Sign up for free today!