The HTML <area> tag is used for defining an area in an image map. Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page.
The <area> element always nested in map tag.
Attributes Description
shape
Defines a shape for the clickable area. Possible values:
- Default: Specifies the entire region.
- Poly or Polygon: Defines a polygonal region.
- Rect or Rectangle: Defines a rectangular region.
- Circle or circ: Defines a circular region.
href
Specifies the target url of the area. It should be another image or link of another website.
target
This attribute will specify that where to open target link. It should be _blank, _parent, _self, _top or frame name.
media
This attribute will specify that which media device the target url is optimized for. The default value is all.
hreflang
This attribute specifies language code of the destination URL. Only to be used when the href attribute is present.
type
This attribute specifies the MIME type of the linked resource. Only to be used when the href attribute is present.
alt
This specifies text to be used in case the browser/user agent can't render the image.
coords
Specifies the coordinates of the clickable area. Coordinates are specified as follows:
- rect: left, top, right, bottom.
- circle: center-x, center-y, radius.
- poly: x1, y1, x2, y2, ...
ping
Gives the URLs to be notified if the user follows the hyperlink. Only to be used when the href attribute is present.
rel
Specifies the relation between current document and the target URL.Attribute values are shown below:
- alternate
- archives
- author
- bookmark
- external
- feed
- first
- help
- index
- last
- license
- next
- nofollow
- noreferrer
- prev
- search
- sidebar
- tag
- up
Code:
<body>
<img src="Desert.jpg" width="145" height="126" alt="Desert" usemap="#Desertmap" />
<map name="Desertmap">
<area shape="rect" coords="2, 39, 138, 123" alt="Desert"
href="http://www.mindstick.com/developerssection.aspx" /> <!--using area tag where coords attribute is defined that specifies clickable area on image -->
<area shape="circle" coords="75, 20, 20" alt="Flower"
href="http://www.google.com" />
</map>
</body>
If user clicked on desert area then user will reach on MINDSTICK website, if user clicked on sky area on image then user will reach on GOOGLE.
Leave Comment