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:

<!DOCTYPE html> declares the document type as HTML5.
The <html> element contains all the content of the web page.
The <head> element contains metadata about the document, such as the title and links to stylesheets and scripts.
The <title> element sets the title of the web page.
The <style> element contains CSS styles that apply to the document.
The img selector in the CSS sets the maximum width of the image to 100% and the height to auto, which ensures that the image scales proportionally to the size of its container.
The <body> element contains the visible content of the web page.
The <h1> element sets the main heading of the page to "World Map".
The <img> element displays the image with the URL "worldmap.jpg" and specifies the usemap attribute with the value "#map", which links to the map element.
The <map> element defines the clickable areas of the image.

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:

shape: Specifies the shape of the clickable area, which can be "rect" (rectangle), "circle", or "poly" (polygon).
coords: Specifies the coordinates of the clickable area as a comma-separated list of values. The number of values depends on the shape of the area. For example, a rectangle requires four values: the x-coordinate and y-coordinate of the top-left corner, and the x-coordinate and y-coordinate of the bottom-right corner.
href: Specifies the URL that the clickable area links to.
alt: Specifies the text to display if the image cannot be loaded or if the user is using a screen reader.

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.

Next: Building a responsive team section with HTML and CSS

/ @kheersagar / Building a responsive image map with HTML and CSS

Building a responsive image map with HTML and CSS

What is an Image Map?

Creating the Image

Creating the HTML Markup

Defining the Image Map Areas

Making the Image Map Responsive

Conclusion

You may also like

Building a responsive image carousel with HTML, CSS, and JavaScript

Building a responsive image zoom gallery with HTML, CSS, and JavaScript

Building a Responsive Image Gallery with HTML, CSS, and JavaScript