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