View Categories

HTML – Image Map

Table of Contents

An HTML image map allows you to define specific areas of an image as clickable links, directing users to different web pages or sections. This technique is especially helpful for creating interactive graphics or navigation elements on a webpage.

By outlining various shapes like rectangles, circles, or polygons on an image, you can transform it into a dynamic visual interface that enhances user interaction and navigation.

Why Use an Image Map?

HTML image maps provide an efficient way to create clickable, interactive regions within an image. This can improve navigation, guide users through visual data, or even make interactive diagrams. Image maps are particularly useful for:

  • Interactive navigation systems – where different parts of an image link to different pages.
  • Interactive infographics – allowing users to click on different parts of a visual to access further information.

The <map> Tag in HTML #

The <map> tag is used to define an image map in HTML. This tag serves as a container for the <area> elements that define the clickable regions. By combining the <img> and <map> tags, you can link different parts of an image to different URLs.

Example:

<map name="site_map">
   <!-- Define clickable areas within the image -->
</map>

When paired with the <img> tag, the image becomes a map with specific regions linked to various destinations.

The <area> Tag in HTML #

The <area> tag works within the <map> element to define clickable areas on an image. You can set specific shapes and coordinates for these areas, enabling interactivity.

Syntax:
<area shape="shape_type" coords="coordinates" href="url" alt="description">

Defining Clickable Shapes #

Rectangular Area: Defines a clickable rectangle.

<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.

Circular Area: Creates a circular clickable region.

<area shape="circle" coords="x,y,r" href="url" alt="description">
  • x, y: Center coordinates of the circle.
  • r: Radius of the circle.

Polygon Area: Used for more complex shapes like polygons. You define multiple points to form the clickable region.

<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href="url" alt="description">
x1, y1 to xn, yn: Coordinates forming the polygon.

Creating an HTML Image Map #

Follow these steps to create an image map in HTML.

Step 1: Prepare Your Image

Choose the image you want to use as a clickable map. For example, we’ll use an image named sample.jpg.

Step 2: Define the Image Map

Use the <map> tag to define your image map and give it a name.

<map name="sample_map">
    <!-- Clickable areas will be defined here -->
</map>

Step 3: Define Clickable Areas

Within the <map> element, use the <area> tag to specify clickable regions. Below is an example where we define both a circular and a rectangular clickable area.

HTML Image Map Example

<!DOCTYPE html>
<html>

<head>
    <title>Interactive Image Map Example</title>
</head>

<body>
    <img src="https://www.example.com/images/sample.jpg" usemap="#sample_map" alt="Sample Image">
    <map name="sample_map">
        <!-- Circular clickable area -->
        <area shape="circle" coords="100,75,50" href="circle-link.html" alt="Circle Area">
        <!-- Rectangular clickable area -->
        <area shape="rect" coords="200,50,300,100" href="rectangle-link.html" alt="Rectangle Area">
    </map>
</body>

</html>

In this example:

  • A circular clickable region is created at coordinates 100, 75 with a radius of 50.
  • A rectangular clickable region is defined with the coordinates of the top-left corner 200, 50 and bottom-right corner 300, 100.

This method of using image maps adds interactivity to your website, making images more functional and engaging for users.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment