HTML <map> element is employed in conjunction with the <area> element to specify a client-side image map.
An image map comprises an image with clickable regions, enabling users to interact by clicking on specific areas of the image to navigate to new or designated destinations.
The <map> tag may contain multiple <area> elements that specify the coordinates and shape of the clickable area.
By utilizing the <map> tag, it becomes straightforward to link specific areas of an image to other resources without the need to split up the image.
Syntax
Example
<map name=" ">
Here are some details regarding the HTML <map> element:
| Display | None |
|---|---|
| Start tag/End tag | Empty Tag(Only Start tag) |
| Usage | Image map |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML map tag</title>
<style>
body{
margin-left: 250px;}
</style>
</head>
<body>
<h2>Example of HTML Map tag</h2>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" usemap="#web">
<map name="web">
<area shape="rect" coords="66,117,131,168" href="html-tutorial">
<area shape="rect" coords="199,36,277,85" href="css-tutorial">
<area shape="rect" coords="330,107,406,159" href="bootstrap-tutorial">
<area shape="rect" coords="199,185,267,236" href="javascript-tutorial">
</map>
</body>
</html>
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
name |
mapname | It defines the name of the image-map. |
Global attribute:
The <map> tag facilitates the utilization of global attributes within HTML.
Event attribute:
The <map> tag facilitates the utilization of event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<map> |
Yes | Yes | Yes | Yes | Yes |