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:

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

• 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 logo.png.

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/logo.png" 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"> </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="index.htm" alt="tutorialspoint"> <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" 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 (logo.png) 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/logo.png" usemap="#image_map"> <map name="image_map"> <!-- Define your clickable areas here --> <area shape="circle" coords="45,32,49" href="/index.htm" alt="tutorialspoint"> <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library"> </map> </body> </html>