Map HTML

HTML <map> Tag

To specify a client-side image map, the HTML <map> tag is used. An image with clickable areas is what an image map is. A new or specified destination opens on clicking the image. The <area> elements within the <map> tag specify the coordinates and shape of the area. Thus a part of the image can be linked to any other document, without actually dividing the image.

Syntax:

<map name=" ">

Example:

<!DOCTYPE html>
<html>
<body>
<p>Click on either of the Sun, Mercury or Venus present in the image</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>

Explanation:

In the above example, we are using the HTML <map> tag, to define an image map.

Tag-specific attributes:

Attribute	Value	Uses
name	mapname	Used to specify the name of the image map and is a required tag.

Global attribute:

The HTML global attributes are supported by the HTML <map> tag.

Event attribute:

The HTML event attributes are supported by the HTML <map> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.