In this section we will discuss the use of <area> tag and about its implementation in the html document.
The <area> tag is used for creating an area in the image map (with <map>tag). Image map is the image divided in to clickable areas or we can say mouse sensitive areas. It means when we click on those areas in the image map it sends to another page or resource. It works just like a hyperlink works in the text. For this hyperlink action we use the href attribute in the <area> tag .
The <area> tag is used only within the <map> tag, the regions within image map is mouse sensitive.
The syntax for the <area> tag is as follows:
|<area coords="value" href="resource" shape="rect" />|
Attributes of <area> tag.
In the <area> tag there are so many element specific attributes given below:
The code for implementing the area tag is as follows:
In this Example we use the three attributes of <area> tag. Here is the description of the attributes:
This attribute defines the alternate text message within each clickable area in the map. This attribute is used only when browser can't read or render the image and href attribute is present.
This attribute defines the co-ordinates of the mouse sensitive (clickable) areas of any shape on the image map. The co-ordinates are defined according to the shape of area.
The href attribute specifies the URL link for the area tag in the image map.Each tag have a link.
This attribute defines the shape of the area selected in the image map for link as a clickable region. the following shapes can be possible in this attribute, circle(circ), polygon (poly), rectangle ( rect).
|<!DOCTYPE html >
<title> Example For Area Tag </title>
<img src="comp.gif" width="350" height="299" usemap="#computermap" />
<area coords="16, 78, 123, 242" href="cpu.bmp" shape="rect" alt="cpu"/>
<area coords="138, 90, 303, 239" href="monitor.bmp" shape="rect" alt="monitor"/>
<area coords="70, 244, 324, 290" href="keyboard.bmp" shape="rect" alt="keyboard"/ >
Output: For getting output, please click the image and then any part of the image.
Note: See the browser compatible page for successfully rendering the program.
Posted on: September 1, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles