HTML <area> Tag
This <area> tag is used in an HTML document to map a portion of an image to make it clickable by the end user. This specifies the location and size of the active region on an image, which can be clicked. Clicking on areas with href attributes directs to a specified URL or action.
Note: The <area>
tag also supports the Global Attributes and Event Attributes in HTML and This <area> tag is always nested in <map> tag.
Syntax:
<area>
Attributes:
Attribute Values |
Description |
---|---|
The shape to be mapped on the image can be a “rect”, a “circle” or a “poly” |
|
The coordinates of the shape. |
|
The href is the link that the user will be directed to after clicking the mapped portion of the image. |
|
Alternative text for a clickable area in an image map. |
|
Download target when the hyperlink is clicked. |
|
Context in which to open the link resource. |
|
Language of targeted URL. |
|
Optimized URL for media or device. |
|
Relationship between URL and document. |
|
Media type of URL |
Example: In this example, we will use the <area> tag in html.
html
<!DOCTYPE html> < html > < body > < img src= "https://media.w3wiki.net/wp-content /uploads/20190227165729/area11.png" alt = "" width = "300" height = "119" class = "aligncenter size-medium wp-image-910965" usemap = "#shapemap" /> < map name = "shapemap" > <!-- area tag contained image. --> < area shape = "poly" coords = "59,31,28,83,91,83" href= "https://media.w3wiki.net/wp-content/ uploads/20190227165802/area2.png" alt = "Triangle" > < area shape = "circle" coords = "155,56,26" href= "https://media.w3wiki.net/wp-content/ uploads/20190227165934/area3.png" alt = "Circle" > < area shape = "rect" coords = "224,30,276,82" href= "https://media.w3wiki.net/wp-content/ uploads/20190227170021/area4.png" alt = "Square" > </ map > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 1
Contact Us