HTML Image Maps - Web4learners

HTML image maps allow you to create multiple clickable areas within a single image. Each clickable area can link to a different webpage or destination. The HTML <map> and <area> elements are used to define these interactive regions.

Image maps are useful for diagrams, maps, product illustrations, building layouts, and other images where users need to click specific sections to access more information.

What Is an HTML Image Map?

An HTML image map is an image containing one or more clickable regions. Unlike a normal image link, which makes the entire image clickable, an image map allows different parts of the same image to point to different destinations.

HTML uses three main components to create an image map:

<img> displays the image and connects it to the map.
<map> defines the image map and its name.
<area> defines individual clickable regions within the image.

HTML Image Map Syntax

The usemap attribute connects an image to a <map> element. The name attribute of the map must match the name specified in usemap, including the # symbol in the image attribute.

<img src="computer.jpg" alt="Computer components" usemap="#computermap">

<map name="computermap">
    <area shape="rect" coords="34,44,270,350"
          href="monitor.html" alt="Computer monitor">
</map>

In this example, a rectangular region of the image links to monitor.html.

HTML Image Map Example

The following example demonstrates how to create an image map with multiple clickable regions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Image Maps</title>
</head>
<body>

    <h1>HTML Image Maps</h1>

    <p>Click a region of the image to visit its destination.</p>

    <img src="workplace.jpg"
         alt="A workplace containing a computer and a phone"
         usemap="#workmap"
         width="400"
         height="300">

    <map name="workmap">
        <area shape="rect"
              coords="34,44,270,200"
              href="computer.html"
              alt="Computer">

        <area shape="circle"
              coords="337,180,30"
              href="phone.html"
              alt="Phone">
    </map>

</body>
</html>

Save the code as index.html and place workplace.jpg, computer.html, and phone.html in the appropriate locations. The coordinates must match the actual positions of the objects in your image.

HTML Image Map Shapes

The shape attribute defines the shape of a clickable area.

Shape	Description	Coordinates
`rect`	Creates a rectangular area	`x1,y1,x2,y2`
`circle`	Creates a circular area	`x,y,radius`
`poly`	Creates a polygonal area	`x1,y1,x2,y2,...`
`default`	Represents the remaining area	Not required

For rectangular areas, the coordinates identify two opposite corners. For circles, they specify the center and radius. Polygon coordinates identify the vertices of the clickable region.

Important HTML Image Map Attributes

Attribute	Description
`usemap`	Connects an image to a named map
`name`	Identifies the image map
`shape`	Specifies the clickable area’s shape
`coords`	Defines the area’s coordinates
`href`	Specifies the destination URL
`alt`	Provides alternative text for the area

When to Use HTML Image Maps

Image maps are useful when a single image contains multiple objects that need separate links. For example, an interactive office layout could link a desk, computer, and telephone to different information pages.

For responsive websites, remember that image-map coordinates do not automatically scale with a resized image. You may need JavaScript or a responsive image-map solution to keep clickable regions aligned. Always provide meaningful alternative text and ensure interactive regions are usable with a keyboard.