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 which specify the area that are 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 make 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:
- Open the Visual Studio 2010
- Open File menu->>select new->> Website
- Choose Empty Website
- Rename it
![image 2.jpg]()
Step 2:
- Go to the Solution Explorer
- Right-click on the Application name
- Select Add-->add new item
- Now in the window that opens, select an HTML page or new Web form
- Rename it.
![image 3.jpg]()
Step 3: Repeat Step 2 for 4 HTML pages.
Step 4: Add an image into Solution Explorer.
Step 5: Open the first HTML page and write the following code.
Here is the code:
<html>
<body>
<img src="Penguins.jpg" width="400" height="500" alt="Planets" usemap="#PenguinMap" />
<map name="PenguinMap">
<area shape="rect" coords="0,0,100,500" href="HTMLPage2.htm" alt="penguin1" />
<area shape="rect" coords="105,0,230,500" href="HTMLPage3.htm" alt="penguin2" />
<area shape="rect" coords="235,0,350,500" href="HTMLPage4.htm" alt="penguin3" />
</map>
</body>
</html>
Output:
![iamge 1.jpg]()
Now, click on the first Penguin and see the result.
![iamge 2.jpg]()
Now, click on the second Penguin and see the output:
![iamge 3.jpg]()
Now, click on the third Penguin and see the output:
![iamge 4.jpg]()