HTML Image Maps: With HTML image maps, you can create clickable areas on an image.
Using HTML map tags, you can create a clickable map.
By tapping the HTML map region, the user will open links provided.
The clickable places are defined using <area> elements.
You can’t avoid the ending tag while creating an HTML image map.
In this article, you will learn-
Image Maps
The HTML <tag> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.
Example
Here is the HTML source code for the image map above:
<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>
How Does it Work?
The thought behind a picture map is that you ought to have the option to perform various activities relying upon where in the picture you click.
To create an image map you need a picture, and some HTML code that depicts the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from different pictures is that you should add a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value begins with a hash tag # followed by the name of the picture map, and is used to create a relationship between the image and the image map.
Tip: You can use any image as an image map!
Create Image Map
At that point, add a <map> element.
The <map> element is used to create an image map, and is linked to the picture by using the necessary name attribute:
<map name="workmap">
The name attribute should have a similar value as the <img>’s usemap attribute.
The Areas
At that point, add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You should define the shape of the clickable area, and you can pick one of these values:
• rect – defines a rectangular region
• circle – defines a circular region
• poly – defines a polygonal region
• default – defines the whole region
You should likewise define a few directions to have the option to put the clickable region onto the picture.
Shape=”rect”
The coordinates for shape=”rect” come in pairs, one for the x-axis and one for the y-axis.
In this way, the directions 34,44 is found 34 pixels from the left edge and 44 pixels from the top:
The directions 270,350 is found 270 pixels from the left edge and 350 pixels from the top:
Presently we have sufficient data to create a clickable rectangular region:
Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
This is the area that becomes clickable and will send the user to the page “computer.htm”:
Shape=”circle”
To add a circle region, first find the directions of the focal point of the circle:
337,300
At that point indicate the range of the circle:
44 pixels
Presently you have sufficient data to create a clickable circular region:
Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
This is the region that gets clickable and will send the user to the page “coffee.htm”:
Shape=”poly”
The shape=”poly” contains a few organize focuses, which creates a shape formed with straight lines (a polygon).
This can be used to create any shape.
Like perhaps a croissant shape!
How might we make the croissant in the picture beneath become a clickable link?
We need to track down the x and y coordinates for all edges of the croissant:
The directions come two by two, one for the x-axis and one for the y-axis:
Example
<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" href="croissant.htm">
This is the region that gets clickable and will send the user to the page “croissant.htm”:
Image Map and JavaScript
A clickable region can likewise trigger a JavaScript function.
Add a click occasion to the <area> element to execute a JavaScript function:
Example
Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Chapter Summary
• Use the HTML <map> element to define an image map
• Use the HTML <area> element to define the clickable regions in the picture map
• Use the HTML usemap attribute of the <img> element to highlight a picture map
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.
