HTML Image Maps
With image maps, you can add clickable areas on an image.
Image Maps
The <map>
tag defines an image-map. An image-map is an image with
clickable areas.
Click on the computer, the phone, or the cup of coffee in the image below:
Example
<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>
Try it Yourself »
How Does it Work?
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.
To create an image map you need an image, and a map containing some rules that describe the clickable areas.
The Image
The image is inserted using the <img>
tag.
The only difference from other images is that you must
add a usemap
attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap
value starts with a hash tag
#
followed by the name of the image map, and is used to create a relationship
between the image and the image map.
Note: You can use any image as an image map.
The Map
Then add a <map>
element.
The <map>
element is used to create an image map, and is linked to the image by using the name
attribute:
<map name="workmap">
The name
attribute must have the same value as the
usemap
attribute.
Note: You may insert the <map>
element anywhere you like, it
does not have to be inserted right after the image.
The Areas
Then add the clickable areas.
A clickable area is defined using an <area>
element.
Shape
You must define the shape of the area, and you can choose one of these values:
rect
- defines a rectangular regioncircle
- defines a circular regionpoly
- defines a polygonal regiondefault
- defines the entire region
Coordinates
You must define some coordinates to be able to place the clickable area onto the image.
The coordinates come in pairs, one for the x-axis and one for the y-axis.
The coordinates 34, 44
is located 34 pixels
from the left margin and 44 pixels from the top:
The coordinates 270, 350
is located 270
pixels from the left margin and 350 pixels from the top:
Now you have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Try it Yourself »
This is the area that becomes clickable and will send the user to the page computer.htm:
Circle
To add a circle area, first locate the coordinates of the center of the circle:
337, 300
Then specify the radius of the circle:
44
pixels
Now you have enough data to create a clickable circular area:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Try it Yourself »
This is the area that becomes clickable and will send the user to the page coffee.htm:
Image Map and JavaScript
A clickable area does not have to be a link to another page, it can also trigger a JavaScript function.
Add a click
event on the <area>
element
to execute a JavaScript function:
Example
You can use the onclick
attribute to execute a JavaScript function when the
area is clicked
<area shape="circle" coords="337,300,44"
onclick="myFunction()">
Try it Yourself »
Chapter Summary
- Use the HTML
<map>
element to define an image-map - Use the HTML
<area>
element to define the clickable areas in the image-map - Use the HTML
<img>
's elementusemap
attribute to point to an image-map