Posts in current category

HTML5 <map> tag


May 03, 2021 16:00 HTML5


Table of contents


Instance

HTML5 is used to represent an image map, which means an image map with a clickable area:

<img src="planets.gif"width="145" height="126"alt="Planets"usemap="#planetmap">

<mapname="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Try it out . . .

Browser support

HTML5 <map> tag HTML5 <map> tag HTML5 <map> tag HTML5 <map> tag HTML5 <map> tag

Most browsers currently support the hashtag.


Label definition and instructions for use

The label is used for client image mapping. An image map is an image with a clickable area.

The usemap property in slt;img>can refer to the id or name property in slt;map?gt; depending on the browser, so we should add the id and name properties to the same time.

The area element is always nested inside the map element. The area element defines the area in the image map.


The difference between HTML 4.01 and HTML5

Note: In HTML5, if the id property is specified in the label, you must also specify the name property.


The difference between HTML and XHTML

In XHTML, the name property is discarded and replaced with the id property.


Property

Property Value Describe
name mapname Necessary. The name specified for image-map.


Global properties

The label supports global properties and views the full property sheet HTML global properties.


The event property

The label supports all HTML event properties.