Front-End Development Building an Image Upload Feature with JavaScript Mastering Image Alignment: Centering Images with HTML & CSS Adding Video to Your React Native App with react-native-video HTML Image Slider: Do It Yourself and 1-Step Image Gallery Widget How to Effectively Manage Digital Assets in a PHP Image Gallery Introducing Angular Image Editor: Your New Editing Too Mastering Javascript Image Annotation Mastering JavaScript Image Popup Python Video Player: 3 Free Options and a Quick Tutorial Image Recognition Machine Learning: Use Cases and Common Algorithms HTML/CSS: How to Center Images Vertically and Horizontally How to Create an Image Map Understand CSS Background Position with 4 Simple Examples Java for Image Processing: 4 Libraries You Should Know Python Video Processing: 6 Useful Libraries and a Quick Tutorial Blur Image CSS: Two Ways to Blur Images for Gorgeous Effects Designing a Video Flipping App for Android Build an App for Embedding Video Watermarks on Android Devices Change Image on Hover with HTML and CSS How to Align Images with CSS Full Page Background Image with CSS: Tutorial and 5 Automation Tips Using CSS to Scale Page Elements and a Better Way to Scale Your Images CSS Background Image: Quick Tutorial and 3 Automation Tips Featured Image: Best Practices to Feature Images on Your Website Image Gallery Websites: Tips and Tricks for a Stunning Image Gallery 6 Ways to Stretch a Background Image with CSS Auto Cropping for Images and Video: Features & Best Practices FLAC vs. WAV: 4 Key Differences and How to Choose Converting Audio to Video: A Practical Guide FLAC vs. AIFF: 5 Key Differences and How to Choose FLAC vs. MQA: 5 Key Differences and How to Choose Converting WAV Files To OGG The Ultimate Guide On Converting OGG Files To WAV Sound Choices: FLAC vs. MP3 AAC vs MP3 – The Future of Audio Files All about AIFF and how it compares to WAV and MP3 Integrating Cloudinary with Netlify Integrating Cloudinary with Svelte and SvelteKit Integrating Cloudinary with Nuxt Integrating Cloudinary with Gatsby File Upload as a Service: How It Works and 5 Leading Solutions Native Mobile App Development Creative Uses for CSS Inner Border and 3 Ways to Set a Border Integrating Cloudinary with Next.js Front-End Development: The Complete Guide

How to Create an Image Map

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

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>

how to create an image 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>).

how to create an image map
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">

how to create an image map

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!

QUICK TIPS
Colby Fayock
Cloudinary Logo Colby Fayock

In my experience, here are tips that can help you better create and optimize image maps:

  1. Use a responsive image map library
    Since image maps can be tricky to scale responsively, use a JavaScript library like image-map-resizer to ensure that the clickable areas adjust correctly on different screen sizes. This prevents users from clicking the wrong areas on smaller devices.
  2. Optimize image size for faster loading
    Compress the image used in the map to reduce loading times without sacrificing quality. Tools like Cloudinary can help dynamically deliver appropriately sized images based on the user’s device, ensuring quick load times and a smooth user experience.
  3. Use SVG for more complex interactivity
    If your image map requires highly detailed areas or advanced interactivity, consider using SVG (Scalable Vector Graphics) instead. SVGs allow you to create more intricate shapes with pixel-perfect precision, and they scale perfectly across all screen sizes.
  4. Provide alternative navigation
    For accessibility and SEO purposes, provide an alternative text-based navigation option beneath or alongside the image map. This ensures that users who cannot interact with the image map still have a way to access the linked content.
  5. Test with screen readers
    Ensure your image map is accessible by testing it with screen readers. Use the alt attributes effectively within the <area> tags, and consider adding ARIA labels to improve navigation for users with disabilities.
  6. Leverage CSS for hover effects
    Enhance user experience by adding CSS hover effects to the clickable areas of the image map. You can highlight or change the opacity of the areas when hovered over, giving users visual feedback about interactive zones.
  7. Use a grid system for easier area mapping
    Divide your image into a grid using a tool like GIMP or Photoshop to map out the coordinates more easily. This helps in defining precise clickable areas and ensures they align perfectly with the image.
  8. Minimize the number of clickable areas
    Keep the number of clickable areas to a minimum to avoid clutter and complexity. Too many clickable regions can confuse users and make the map harder to maintain, especially as your website evolves.
  9. Add tooltips for better user guidance
    Implement tooltips that appear when users hover over an area on the image map. These tooltips can provide additional context or instructions, improving the overall usability of the map.
  10. Consider performance impact
    Be mindful of the performance impact when using large image maps, especially on mobile devices. Optimize the image and consider lazy-loading techniques to ensure that your image map does not slow down page load times.
Last updated: Aug 24, 2024