HTML Reference Manual

HTML Tag大全

HTML: <map> tag

The HTML <map> tag is used to define an image map with clickable areas (or hotspots). Within the <map> tag, the <area> tag can be used to create clickable areas, and each clickable area can have an associated hyperlink. This tag is also commonly referred to as the <area> element.

Online Example

Image map with clickable areas:

Example

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<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.html">
　　<area　shape="circle"　coords="90,58,3"　alt="Mercury"　href="mercur.html">
　　<area　shape="circle"　coords="124,58,8"　alt="Venus"　href="venus.html">
</map>
</body>
</html>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Most browsers currently support the <map> tag.

Tag Definition and Usage Description

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

The usemap attribute of the <img> tag must be the same as the name attribute of the <map> tag to establish a relationship between these two elements.

The area element is always nested inside the map element. The area element can define an area in an image map.

HTML 4.01 with HTML5differences

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

Differences between HTML and XHTML

In XHTML, the name attribute has been deprecated and replaced by the id attribute.

Attribute

Attribute	Value	Description
name	mapname	Required. For image-The name specified by map

global attributes

The <map> tag supports global attributes; see the complete attribute table HTML Global Attributes.

event attributes

The <map> tag supports all HTML Event Attributes.

HTML: <main> tag HTML: <link> tag