HTML - Image Map

An image map in HTML 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, polygons) within an image, each with its own associated link, developers can create dynamic and interactive visual content that enhances user engagement and navigation.

Why to use Image Maps?

Image maps in HTML efficiently create interactive graphics by defining clickable regions within an image. This allows users to interact with different image parts, triggering specific actions or links.

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

The <map> tag

In HTML, 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.

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

The <area> tag

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

Syntax

Following is the syntax of the <area> tag −

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

Rectangular Area

We have to pass "rect" as value if need the area in rectangular shape. Rectangles require coordinates for the top-left and bottom-right corners.

<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

We have to pass "circle" as value if need the area in circular shape. Circles need the center coordinates and radius.

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

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

  • r − Radius of the circle.

Area in the shape of a polygon

We have to pass "poly" as value if need the area in the shape of any polygon. Polygons require a series of coordinates to form the shape. This can be used to create any shape whether it be a mango or apple.

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

Where, x1, y1, ..., xn, yn: Coordinates forming the polygon.

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

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 an image you want to turn into an image map. For this example, let's use an image named ".jpg."

  • Step 2 - Define the image map − Use the <map> tag to define the image map, and give it a unique name using the name attribute.

  • Step 3 - Define clickable areas − Within the <map> element, you can define clickable areas using <area> tags. Specify the shape (rect, circle, or poly), the coordinates, and the URL to link to. Here's an example with a clickable rectangle −

  • Repeat Step 3 for each clickable area you want to create within the image.

  • Close the HTML file and save it with .html extension.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Image Map Example</title>
</head>
<body>
   <img src="https://www.tutorialspoint.com/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>

On executing the above example, a page with Tutorialspoint logo will be displayed. If you click on the circle in the logo, the page will be redirected to the homepage of tutorialspoint and, if you click on “tutorials” (rectangular area map) you will be redirected to our tutorials library.

You can add more ‘<area>’ elements to create different clickable regions on the image, connecting them to different URLs or actions per your requirements. This provides an interactive experience for your website visitors.

Advertisements