The <area> tag use to define an area inside an image-map.An image-map
is a image have more clickable images inside it,just like various locations
in map.When you click on that image the new webpage will be open that is
linked with that image.
The <area> element is always nested inside a <map> tag. The usemap attribute in the <img> tag is associated with the <map> tag and creates a relationship between the image and the map. In HTML the <area> tag has no end tag while in Xhtml the <area> tag has. Generally You have a image that is related to a single link,but in image-map there is various images which are assosiated with different locations.
You can understand <area> tag with a simple example:-
The following attributes can be set for the </area> tag:-
Please comment in comment box if you understand <area> tag and have any query regarding it.--
The <area> element is always nested inside a <map> tag. The usemap attribute in the <img> tag is associated with the <map> tag and creates a relationship between the image and the map. In HTML the <area> tag has no end tag while in Xhtml the <area> tag has. Generally You have a image that is related to a single link,but in image-map there is various images which are assosiated with different locations.
You can understand <area> tag with a simple example:-
e.g.:-
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<body>
<img src="http://lh5.googleusercontent.com/-vl88LT8- 2VI/AAAAAAAAAAI/AAAAAAAAADk/qZP_A1aQNZo/s80-c/photo.jpg" alt="usemap" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank" />
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial" href="/html/index.htm" target="_blank" />
<area shape="circle" coords="73,168,32" alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
</map>
</body>
</html>
Result:-
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<body>
<img src="http://lh5.googleusercontent.com/-vl88LT8- 2VI/AAAAAAAAAAI/AAAAAAAAADk/qZP_A1aQNZo/s80-c/photo.jpg" alt="usemap" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank" />
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial" href="/html/index.htm" target="_blank" />
<area shape="circle" coords="73,168,32" alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
</map>
</body>
</html>
Result:-
The following attributes can be set for the </area> tag:-
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for the area. |
| coords | if shape="rect" then coords="left,top,right,bottom" if shape="circ" then coords="centerx,centery,radius" if shape="poly" then coords="x1,y1,x2,y2,..,xn,yn" |
Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps. |
| download | filename | Specifies that the target gets downloaded when hyperlink is clicked by user. |
| href | URL | Specifies the URL of a page or the name of the anchor that the link goes to. |
| hreflang | language_code | Specifies the language of the target URL. |
| media | media query | Specifies media/device the target URL is optimized for. |
| nohref | true/false | Excludes an area from the image map |
| shape | rect,rectangle,circ, circle,poly,polygon |
Specifies the shape of the image map |
Please comment in comment box if you understand <area> tag and have any query regarding it.--
0 comments:
Post a Comment