HTML Image Maps

With HTML image maps, you can make clickable areas on an image.

Image Maps

The <map> tag defines an image map: an image with clickable areas. The areas are defined with one or more <area> tags.

Example

An image map with clickable computer, phone, and coffee areas.

A page with an image map over workplace.jpg using a map named workmap and three clickable areas: a rectangle over the computer (computer.htm), a rectangle over the phone (phone.htm), and a circle over the coffee cup (coffee.htm).

> Output: complete HTML page

Prompt

A page with an image map over workplace.jpg using a map named workmap and three clickable areas: a rectangle over the computer (computer.htm), a rectangle over the phone (phone.htm), and a circle over the coffee cup (coffee.htm).

Output: complete HTML page

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

</body>
</html>

How Does it Work?

The idea of an image map is that you can do different things depending on where in the image you click. To make one you need an image plus some HTML that describes the clickable areas.

The Image

The image is added with the <img> tag. The only difference from a normal image is that you add a usemap attribute. Its value starts with a # followed by the image map's name, which links the image to the map.

Tip: You can use any image as an image map.

Image with usemap

An image linked to a map with the usemap attribute.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Create Image Map

Next, add a <map> element. It is linked to the image by its required name attribute, which must match the image's usemap value.

Map element

The opening <map> tag with its name.

<map name="workmap">

The Areas

Then add the clickable areas, each with an <area> element. You set the shape: rect for a rectangle, circle for a circle, poly for a polygon, or default for the whole image. You also set coordinates to place the area on the image.

Shape="rect"

For shape="rect", the coordinates come in pairs of x (from the left) and y (from the top). For example, 34,44 is 34 pixels from the left and 44 from the top, and 270,350 is the opposite corner. Together they make a clickable rectangle.

Example

A rectangular clickable area linking to computer.htm.

A page with an image map over workplace.jpg with a single rectangular clickable area, coords 34,44,270,350, linking to computer.htm.

> Output: complete HTML page

Prompt

A page with an image map over workplace.jpg with a single rectangular clickable area, coords 34,44,270,350, linking to computer.htm.

Output: complete HTML page

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

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

</body>
</html>

Shape="circle"

For shape="circle", give the coordinates of the center, then the radius. For example, a center of 337,300 and a radius of 44 pixels make a clickable circle.

Example

A circular clickable area linking to coffee.htm.

A page with an image map over workplace.jpg with a single circular clickable area centered at 337,300 with radius 44, linking to coffee.htm.

> Output: complete HTML page

Prompt

A page with an image map over workplace.jpg with a single circular clickable area centered at 337,300 with radius 44, linking to coffee.htm.

Output: complete HTML page

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="circle" coords="337, 300, 44" alt="Coffee" href="coffee.htm">
</map>

</body>
</html>

Shape="poly"

For shape="poly", give several coordinate pairs to make a shape from straight lines. This can form any shape, such as a croissant, by finding the x and y coordinates for all its edges.

Example

A polygonal clickable area following a croissant's outline.

A page with an image map over a croissant image using a polygonal clickable area following the croissant's edges, linking to croissant.htm.

> Output: complete HTML page

Prompt

A page with an image map over a croissant image using a polygonal clickable area following the croissant's edges, linking to croissant.htm.

Output: complete HTML page

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

<img src="croissant.jpg" alt="Croissant" usemap="#croissantmap">

<map name="croissantmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>

Image Map and JavaScript

A clickable area can also run a JavaScript function. Add a click event to the <area> element with the onclick attribute.

Example

An area that shows an alert when clicked.

A page with an image map where a circular area over the coffee cup runs a JavaScript function on click that alerts "You clicked the coffee cup!"

> Output: complete HTML page

Prompt

A page with an image map where a circular area over the coffee cup runs a JavaScript function on click that alerts "You clicked the coffee cup!"

Output: complete HTML page

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

</body>
</html>

Chapter Summary

To recap: use the <map> element to define an image map, the <area> element to define each clickable area, and the usemap attribute on the <img> element to point to the map.

HTML Image Tags

The image-related tags are: <img> (defines an image), <map> (defines an image map), <area> (defines a clickable area inside an image map), and <picture> (defines a container for multiple image resources).