Working With Area Tag in HTML5


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.


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:
  • 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 Webform
  • 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:
  1. <html>  
  2. <body>  
  3. <img src="Penguins.jpg" width="400" height="500" alt="Planets" usemap="#PenguinMap" />  
  4. <map name="PenguinMap">  
  5.   <area shape="rect" coords="0,0,100,500" href="HTMLPage2.htm" alt="penguin1" />  
  6.   <area shape="rect" coords="105,0,230,500" href="HTMLPage3.htm" alt="penguin2" />  
  7.   <area shape="rect" coords="235,0,350,500" href="HTMLPage4.htm" alt="penguin3" />  
  8. </map>  
  9. </body>  
  10. </html> 
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