HTML 5 <map> Tag
Example
An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"
/>
<map name="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 yourself »
|
Definition and Usage
The <map> tag is used to define a client-side image-map. An image-map is an
image with clickable areas.
The name attribute is required in the map element. This attribute is associated
with the <img>'s usemap attribute and creates a relationship between the image
and the map.
The map element contains a number of area elements, that defines the clickable
areas in the image map.
Differences Between HTML 4.01 and HTML 5
None.
Tips and Notes
Note: The area element is always nested inside the map element.
The area element defines the regions in the image map.
Attributes
| Attribute |
Value |
Description |
| name |
unique name |
Defines a unique name for the map tag, so it can be
referred to. |
Standard Attributes
| class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title |
For a full description, go to Standard Attributes in HTML 5.
Event Attributes
| onabort, onbeforeunload, onblur, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress,
onkeyup, onload, onmessage, onmousedown, onmousemove,
onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect,
onsubmit, onunload |
For a full description, go to Event Attributes in HTML 5.
|
