<map>

HTML <map> Tag

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</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>

Run Example»

Click the "Run Instance" button to view the online instance

Browser support

Currently most browsers support < map>label.

Tag definition and usage instructions

<map> tag is used for client-side image mapping. An image map is an image with clickable areas.

The usemap attribute in<img> can reference the id or name attribute in <map> (depending on the browser), so we should add both the id and name attributes to <map>.

area elements are always nested inside map elements. The area element defines an area in the image map.

Differences between HTML 4.01 and HTML5

Note: In HTML5, if the id attribute is specified in the <map> tag, you must Also specify the name attribute.

Differences between HTML and XHTML

In XHTML, the name attribute has been deprecated, use the id attribute to replace it.

Properties

Properties	Value	Description
name	mapname	Required. The specified name for image-map.

Global attributes

<map> tag supports global attributes, see the complete attribute table HTML global attributes.

Event attributes

<map> tag supports all HTML event attributes.