Understanding Image Maps

The HTML <map> tag defines an image map, which is an image with one or more clickable areas. These interactive regions allow you to link different parts of a single image to various URLs, making your visuals more engaging.

How Does it Work?

Creating an image map involves two key HTML elements: the <img> tag, which includes a special usemap attribute, and a corresponding <map> element that contains one or more <area> tags to define the clickable shapes and their destinations.

The Image with `usemap`

First, insert your image using the <img> tag. The usemap attribute connects the image to the map, starting with a '#' followed by the map's name.

The `` and `` Elements

Next, create a <map> element. Its name attribute must match the usemap value (without the '#'). Inside this map, you'll define the clickable regions using <area> tags.

Defining Clickable Shapes

You can define several shapes for your clickable areas:

rect: Defines a rectangular region.
circle: Defines a circular region.
poly: Defines a polygonal region with multiple points.

Rectangular Area

A rectangle is defined by the x and y coordinates of its top-left and bottom-right corners (coords="x1,y1,x2,y2").

Circular Area

A circle is defined by the coordinates of its center and its radius (coords="x,y,radius").

Complete Image Map Example

Here is the full code combining the image and the map. Try clicking on the computer, phone, or coffee cup.

Image Maps and JavaScript

A clickable area can also trigger a JavaScript function. Add an onclick event to the <area> element to execute a script.

Chapter Summary

Use the HTML <map> element to define an image map.
Use the HTML <area> element to define the clickable areas.
The usemap attribute of the <img> tag points to the image map.

HTML Image Tags

Tag	Description
`<img>`	Defines an image
`<map>`	Defines an image map
`<area>`	Defines a clickable area inside an image map
`<picture>`	Defines a container for multiple image resources

HTML Image Map