HTML is capable of creating clickable areas on an image.
We use HTML <map> and <area> elements to define an HTML image map.
The HTML <area> elements are defined inside the opening <map> and closing </map> tags to make an area clickable on an image.
We will learn the implementation through examples in this chapter.
The below image is an example of an HTML image map. Click on guava, phone or brinjal.
Let's see the HTML code behind this HTML image map.
So from the above code, you had a basic idea about the implementation.
We are actually defining some areas on the image using the coordinates and performing some tasks when the user clicks such defined areas.
Let's see step by step approach to defining the clickable area for guava, phone and brinjal.
The first step is to insert an image with the
attribute.We already know that the HTML <img> element is used for image insertion in an HTML document.
See the HTML code.
The value of the
attribute starts with (hash).After
, one can write any name.In the code above, we have written the name as
.In the second step, we will write the HTML <map> tag with the attribute.
The value of the <img>'s attribute without i.e. picmap.
attribute will be the same as theSee the code.
This is the last step where we will define the clickable areas on the image using the HTML <area> element.
In the <area> tag we will specify three attributes , and .
The value of the
attribute holds the shape of the clickable area. We can specify the following values:If the clickable region is of a shape circle, we will write the value as circle in the attribute.
For guava, the clickable region is a circle.
For the circle area, we will need the coordinates of the centre of the circle and the radius in pixels.
In the case of guava,
the coordinates of the centre of the circle = 80,81
radius = 60px
Hence the clickable area for the guava is defined as:
For rectangular clickable figures, the value of the shape is written as rect.
In our example, the shape of the phone is a rectangle.
For rectangular shapes, we need to provide two pairs of coordinates.
The first coordinates will be taken from the top left extreme point.
In the case of the phone, the coordinates are 168,51.
The second coordinates will be taken from the bottom right extreme point. i.e. 275,285
Hence the clickable area for the phone is defined as:
For irregular figures, we use the value poly in attribute.
In this case, we provide the coordinates of multiple points from the edges of the figure.
To define a clickable area for the brinjal, we will use poly and coordinates for the same are shown in the figure.
1. HTML Tutorial |
2. Introduction to HTML |
3. Basic HTML Page |
4. HTML Editors |
5. Web Browser |
6. HTML History |
7. Basic HTML Tags |
8. HTML Elements |
9. HTML Attributes |
10. HTML Headings |
11. HTML Paragraphs |
12. HTML Text Formatting |
13. HTML Styles |
14. HTML Comment |
15. HTML Quotation |
16. HTML Colors |
17. HTML RGB Colors |
18. HTML HEX Colors |
19. HTML HSL Color |
20. HTML CSS |
21. HTML Links |
22. HTML Link Colors |
23. Link within Page |
24. HTML Images |
25. HTML Background Image |
26. HTML Image Map |
27. HTML Picture Element |
28. HTML Favicon |
29. HTML Table |
30. HTML Table Border |
31. HTML Table Size |