Description:
The <area> tag defines the clickable areas or active areas inside the image-map which are associated with the hyperlinks. If you click on those areas then it will perform some action such as open a new image, new URL, etc. This tag is always used with <map> element.
Inside an image map different areas can be hyperlinked to various locations using multiple <area> elements in a single <map> element.
The <area> element is defined with (required) attributes shape and coords. The shape attribute specifies the shape of the area such as rectangle, circle, square, and polygon. The coords attribute defines the coordinates of areas inside the image.
What is Image-map
An image-map is defined as a graphical image with active areas so that when user click on those area, it can link to different destinations. To define an image-map, we require the following things:
- An HTML <img> element with usemap attribute which defines a valid map name.
- HTML <map> element with name attribute whose value must be same as usemap
- One or more <area> elements inside a <map> element which create clickable areas in an image-map.
Syntax
<area shape="" coords="" href="">
Following are some specifications about the HTML <area> tag
| Display | Block |
| Start tag/End tag | Only start tag(End tag forbidden) |
| Usage | Image Map |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Area tag</title>
<style>
body{
margin-left: 250px;}
</style>
</head>
<body>
<h2>Example of HTML Area tag</h2>
<img src="image1.png" usemap="#web">
<map name="web">
<area shape="rect" coords="66,117,131,168" href="https://www.javatpoint.com/html-tutorial">
<area shape="rect" coords="199,36,277,85" href="https://www.javatpoint.com/css-tutorial">
<area shape="rect" coords="330,107,406,159" href="https://www.javatpoint.com/bootstrap-tutorial">
<area shape="rect" coords="199,185,267,236" href="https://www.javatpoint.com/javascript-tutorial">
</map>
</body>
</html>
Leave a Reply