HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Image Map
The HTML <map> tag denotes an image map. An image map is an image enabling areas of a picture to be clickable. The areas are defined with one or more <area> tags.
Example
Image Maps
Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:
Output:
Image Maps
Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:

The Image
The image is used using the tag. The only difference from other images is that an usemap attribute is used:
<map name=”workmap”>
The usemap value is started by using the hashtag # followed by the name of the image map and is used to create a relationship between the image and the image map.
Create Image Map
The name attribute should have the same value as the ‘s usemap attribute.
The Areas
Adding the clickable areas.
A clickable area is illustrated by using an
element.
Shape
The shape of the clickable area must be defined, 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
Example:
Image Maps
Click on the computer to go to a new page and read more about the topic:
Output:
Image Maps
Click on the computer to go to a new page and read more about the topic:

Image Map and Javascript
A clickable area can also trigger a JavaScript function.
To execute a JavaScript function, add a click event to the
element:
Example:
Image Maps
Click on the image to execute a JavaScript function:
Output:

After Clicking Image:
alert shows you clicked flower and click on ok button.
Open new.html page.