Introduction
In this article, we are going to learn about the area tag in HTML5. The area tag is used to define the various areas in an image with various shapes. The areas inside the image are clickable and we can click the various areas inside the single image. It makes our image an image-map with clickable areas. To use an area tag we have to use a map tag of HTML5. The area tag is placed inside the map tag and the reference to the map tag is given to the image on which we want to define the areas. The areas may be defined in many shapes such as rectangle, circle, polygon, etc. To define these shapes we have set their coordinates that specify the area that is covered by the shapes. This makes the area clickable and we are also set the navigation URL of another page on the clickable area so that when the user clicks a particular area he/she will redirect to the other page.
Attributes
Shape - There are mainly 3 types of shapes we can use for areas in the image:
- Rectangle(rect)
- Cirlce(cir)
- Polygon(poly)
coords - Specifies the coordinates of the clickable area. The coordinates are specified as follows:
- rect: left, top, right, bottom
- circle:center-x, center-y, radius
- poly: x1, y1, x2, y2, ...
alt - Alternate text. This specifies text to be used in case the browser/user agent can't render the image.
href - Here we define the navigation URL of the area inside the image.
Now, we see an example of an area tag within a map tag to define various clickable areas inside an image. Here we use an image of 3 penguins and each of these penguins makes an area of rectangular shape. When a user clicks any of the penguins he/she will be redirected to a big image of the penguin that was clicked.
Follow these steps:
Step 1: