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
- Pros and Cons of Image Maps
- Creating an Image Map with HTML and JS
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 imagehref
indicates the URL to which the user will be directed upon clicking the areaalt
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!