Page 1 of 7

Home Whiteboard Online Compilers Practice Articles Tools

HTML - Image Map

Image Maps
HTML image maps are defined by the <map> tag. An image map enables specific areas
of an image to be clickable, acting as links to different destinations. This technique is
useful for creating complex navigation systems or interactive graphics on a webpage.

By defining various shapes (rectangles, circles, and polygons) within an image, each with
its own associated link, developers can create dynamic and interactive visual content
that enhances user engagement and navigation.

Use of Image Maps

Image maps are useful for creating complex navigation, interactive diagrams, or
engaging visual experiences, enhancing user engagement and interactivity on web
pages.

It is useful to create interactive graphics by defining clickable regions within an image.

This allows users to interact with different image parts, triggering specific actions or
links.

HTML <map> Tag

The <map> tag is used to create a client-side image map, turning specific regions of an
image into interactive elements. This allows users to click on different areas of the
image, triggering various actions. The <map> element serves as a container for <area>
elements, each defining a clickable region with specific attributes.

Syntax
The following is the syntax of the <map> tag:

[Link] 1/7
 Page 2 of 7

<map name="world map">

<!-- Define your clickable areas here -->
</map>

When used in conjunction with the <img> tag, the <map> tag establishes a connection
between the image and its associated map. This enables web developers to create
dynamic and interactive content by defining distinct clickable zones within an image.

Defining Areas (Shapes) in Image Maps

The <area> tag is used within the <map> tag to define clickable regions on an image. It
specifies the shape, coordinates, and associated actions for each clickable area.

Following is the syntax of the <area> tag −

<area shape="shape_values" coords="coordinates" href="url" alt="Description">

1. Rectangular Area

You can define a rectangular shape by assigning the rect value to the shape attribute.
The rectangular shape requires coordinates for the top-left and bottom-right corners that
you can define in coords attribute.

Syntax

<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">

x1, y1 − Coordinates of the top-left corner.

x2, y2 − Coordinates of the bottom-right corner.

2. Circular Area

You can define a circular shape by assigning the circle value to the shape attribute. The
circular shape requires center coordinates (x, y) and radius (r) that you can define in
coords attribute.

<area shape="circle" coords="x,y,r" href="url" alt="Description">

[Link] 2/7
 Page 3 of 7

x, y − Coordinates of the circle's center.

r − Radius of the circle.

3. Polygon Area

You can define a polygon shape by assigning the poly value to the shape attribute. The
polygon shape requires a series of coordinates to form the shape that you can define in
coords attribute.

This can be used to create any shape, whether it be a mango or apple.

Syntax

<area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" href="url" alt="Description">

Where x1, y1,..., xn, yn coordinates form the polygon.

These shapes enable the creation of interactive image maps, enhancing user
engagement by associating distinct actions with specific areas within an image.

Creating an Image Map in HTML

To create an image map in HTML, follow these steps with a code example −

Step 1: Prepare Your Image

Begin with the image you want to use as an image map. For this example, we'll use an
image file named [Link].

Use the usemap attribute in the <img> tag to link the image to the <map> tag by keeping
its value to the name attribute of the <map>:

<img src="/images/[Link]" usemap="#image_map">

Step 2: Define the Image Map

Use the <map> tag to define the image map and give it a unique name with the name
attribute.

<map name="image_map">

[Link] 3/7
 Page 4 of 7

</map>

Step 3: Define Clickable Areas

Within the <map> element, define clickable areas using <area> tags. Specify the shape
(rect, circle, or poly), coordinates, and the URL to link to.

<map name="image_map">
<area shape="circle" coords="45,32,49" href="[Link]"
alt="tutorialspoint">
<area shape="rect" coords="245,50,85,9" href="/[Link]"
alt="tutorials_library">
</map>

Repeat Step 3 for each clickable area you want to create within the image. Finally, close
the HTML file and save it with the .html extension.

Example of HTML Image Map

This example creates an HTML image map where specific areas on the image ([Link])
link to different pages using the <area> tags within the <map> element.

<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<img src="/images/[Link]" usemap="#image_map">
<map name="image_map">
<!-- Define your clickable areas here -->
<area shape="circle" coords="45,32,49" href="/[Link]"
alt="tutorialspoint">
<area shape="rect" coords="245,50,85,9" href="/[Link]"
alt="tutorials_library">
</map>

[Link] 4/7
 Page 5 of 7

</body>
</html>

TOP TUTORIALS

Python Tutorial

Java Tutorial

C++ Tutorial
C Programming Tutorial

C# Tutorial

PHP Tutorial
R Tutorial

HTML Tutorial

CSS Tutorial
JavaScript Tutorial

SQL Tutorial

TRENDING TECHNOLOGIES

Cloud Computing Tutorial

Amazon Web Services Tutorial

Microsoft Azure Tutorial

Git Tutorial

Ethical Hacking Tutorial

Docker Tutorial
Kubernetes Tutorial

DSA Tutorial

Spring Boot Tutorial

SDLC Tutorial

Unix Tutorial

CERTIFICATIONS

Business Analytics Certification

Java & Spring Boot Advanced Certification

Data Science Advanced Certification

[Link] 5/7
 Page 6 of 7

Cloud Computing And DevOps

Advanced Certification In Business Analytics

Artificial Intelligence And Machine Learning

DevOps Certification

Game Development Certification

Front-End Developer Certification

AWS Certification Training

Python Programming Certification

COMPILERS & EDITORS

Online Java Compiler

Online Python Compiler

Online Go Compiler

Online C Compiler
Online C++ Compiler
Online C# Compiler
Online PHP Compiler

Online MATLAB Compiler

Online Bash Terminal
Online SQL Compiler

Online Html Editor

ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |

PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S

Chapters Categories

Tutorials Point is a leading Ed Tech company striving to provide the best learning material on
technical and non-technical subjects.

[Link] 6/7
 Page 7 of 7

© Copyright 2025. All Rights Reserved.

[Link] 7/7