HTML 5 <map> tag
Definition and Usage
Defines a client-side image-map. An image-map is an image with clickable regions.
Differences Between HTML 4.01 and HTML 5
The name attribute is no longer supported in HTML 5
Tips and Notes
Note: The area element is always nested inside the map element.
The area element defines the regions in the image map.
Example
| Source |
Output |
<p>Click on one of the planets:</p>
<img src ="planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
|
Click on one of the planets:
|
Attributes
- 4: indicates if the attribute is defined in HTML 4.01
- 5: indicates if the attribute is defined in HTML 5
| Attribute |
Value |
Description |
4 |
5 |
| id |
unique_name |
Defines a unique name for the map tag |
4 |
5 |
| name |
unique_name |
Defines a unique name for the map tag (for backwards compability).
Not supported. |
4 |
|
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.
Try-It-Yourself Demos
Create an image map
How to create an image map, with clickable regions. Each of the regions is a hyperlink.
…
|
