How to create an area inside an image-map using HTML5 ?
The approach of this article is to create an area inside an image-map by using a <area> tag in a HTML Document. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag. It has no closing tag and hence it is an empty tag for HTML but incase of XHTML you need to close that properly. HTML5 has some new attributes.
Syntax:
<area> Contents </area>
Example:
html
<!DOCTYPE html><html><body style="text-align: center"> <h2 style="color: green;"> GeeksForGeeks </h2> <h2> How to create an area inside an image-map using HTML5? </h2> <img src= 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= alt="Triangle"> <area shape="circle" coords="155, 56, 26" href= alt="Circle"> <area shape="rect" coords="224, 30, 276, 82" href= alt="Square"> </map></body></html> |
Output:
Before click on specific clickable area:
After click on specific clickable area:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...