14 Sept 2023

Building a responsive image map with HTML and CSS

Building a responsive image map with HTML and CSS is a great way to create interactive images that can display additional information or link to other content. In this tutorial, we will cover how to create a responsive image map step by step.

What is an Image Map?

An image map is an image that has multiple clickable areas or hotspots that can be linked to different URLs or display additional information. Image maps are typically used to create interactive diagrams, maps, or infographics that allow users to explore different parts of the image by clicking on the hotspot.

Creating the Image

The first step in creating a responsive image map is to choose the image you want to use and create it. In this tutorial, we will use an image of a world map as an example. You can use any image you like, but it is important to choose an image that is appropriate for the purpose of your image map.

Once you have your image, you will need to upload it to your website or server. Make sure you have the image URL handy, as we will be using it in the HTML code.

Creating the HTML Markup

The next step is to create the HTML markup for the image map. Here is an example of the basic HTML structure for an image map:

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Image Map</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>World Map</h1>
    <img src="worldmap.jpg" usemap="#map">
    <map name="map">
        <!-- Image map areas go here -->
    </map>
</body>
</html>

Let's break down this code to understand what each part does:

Defining the Image Map Areas

Now that we have the basic HTML markup in place, we need to define the clickable areas of the image map. This is done using the <area> element, which is nested inside the <map> element.

Each <area> element requires several attributes to define its shape and location on the image:

Here is an example of how to define a rectangular clickable area on the image:

<area shape="rect" coords="0,0,100,100" href="https://www.knowivate.com" alt="Knowivate Link">

This clickable area is a rectangle that starts at the top-left corner of the image (0,0) and ends at the bottom-right corner (100,100). It links to the URL "https://www.knowivate.com" and displays the text "Example Link" if the image cannot be loaded or if the user is using a screen reader.

You can define as many clickable areas as you like by adding additional <area> elements inside the <map> element. Just make sure to set the correct shape and coords attributes for each area.

Making the Image Map Responsive

By default, image maps are not responsive, which means that they may not work well on different screen sizes or devices. To make the image map responsive, we can use CSS media queries to adjust the size and position of the clickable areas based on the screen size.

Here is an example of how to make the image map responsive:

@media (max-width: 768px) {
    /* Set the size and position of the clickable areas for small screens */
    area {
        coords: 0,0,50,50;
    }
}

This CSS code sets the size and position of the clickable areas to be smaller for screens with a maximum width of 768 pixels. You can adjust the values to fit your image and design.

Conclusion

Building a responsive image map with HTML and CSS is a great way to create interactive images that can display additional information or link to other content. By following the steps outlined in this tutorial, you can create your own image maps and make them responsive to different screen sizes and devices.