HTML Image Maps
With image maps, you can add clickable areas on an image.
<map> tag defines an image-map. An image-map is an image with
Click on the computer, the phone, or the cup of coffee in the image below:
<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">
How Does it Work?
The idea behind an image map is that you should be able to perform different actions depending on were 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 is inserted using the
The only difference from other images is that you must
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.
Then add a
<map> element is used to create an image map, and is linked to the image by using the
name attribute must have the same value as the
Note: You may insert the
<map> element anywhere you like, it
does not have to be inserted right after the image.
Then add the clickable areas.
A clickable area is defined using an
You must define the shape of the area, and you can choose one of these values:
rect- defines a rectangular region
circle- defines a circular region
poly- defines a polygonal region
default- defines the entire region
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.
34, 44 is located 34 pixels
from the left margin and 44 pixels from the top:
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:
This is the area that becomes clickable and will send the user to the page computer.htm:
To add a circle area, first locate the coordinates of the center of the circle:
Then specify the radius of the circle:
Now you have enough data to create a clickable circular area:
This is the area that becomes clickable and will send the user to the page coffee.htm:
click event on the
You can use the
area is clicked