map ... ⁄map
HTML5 map element
The map element serves rendering client-side image maps in your HTML document. »video
The map element must have area elements as children and the value of its name attribute used as value of the usemap attribute of an img element precede by #
About map
Display & support map
- display in browser »video
- display type: inline
Parents, children map
- map nested within elements »map parents
- elements nested within map »map children
»examples
Attributes map
- required: name
- optional: global attributes, event attributes
Syntax map
| 1 | <> ... </> »video |
Attributes and Values map (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| 1. | name | = | text | »video | < name="pirate_map"> ... <⁄> | |
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | ||
| 2. | class | = | class name | »html »img | ||
| 3. | contenteditable | = | "", , true, false | »html | ||
| 4. | contextmenu | = | menu id value | »html | ||
| 5. | data-* | = | value | - | ||
| 6. | dir | = | ltr, rtl, auto | »html | ||
| 7. | draggable | = | true, , false | »img | ||
| 8. | dropzone | = | copy, move, link, string:, file: | - | ||
| 9. | hidden | = | "", , hidden | »html »img | ||
| 10. | id | = | id name | » html » img | < name="pirate_map" id="pirate_map"> .. <⁄> | |
| 11. | itemid | = | URL | - | ||
| 12. | itemprop | = | string | »link »a | ||
| 13. | itemref | = | string | - | ||
| 14. | itemscope | = | "", , itemscope | - | ||
| 15. | itemtype | = | absolute URL | - | ||
| 16. | lang | = | language code | »html »head»title »img | ||
| 17. | spellcheck | = | "", , true, false | »html | ||
| 18. | style | = | CSS property:value | »html »img | ||
| 19. | tabindex | = | integer | »img | ||
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | ||
| 21. | translate | = | "", yes, no | »html »img | ||
| All Global Attributes | ||||||
| 3. global event attributes | ||||||
| 1. | onclick | = | script | » list | <element onclick="script" > ... | |
| 2. | ondblclick | = | script | » list | <element ondblclick="script" > ... | |
| All Event Attributes | ||||||
Video demonstration map element
HTML5 map element: render a client-side image map
| min | video details |
|---|---|
| 00:05 | map element server rendering client-side image maps |
| 00:12 | map element must have area elements as children which allow you to define through its attributes: different shapes (4: circ, poly, rect, default), their coordinates, their destination link |
| 00:32 | map element must have a name attribute whose value is used as value of the usemap attribute on img element, preceded by # |
| 00:44 | this is how you connect an img element to a map element |
| 00:50 | when the img element and the map element are connected, these coordinates refer to a circular area on this image |
| 00:59 | these coordinates refer to a rectangular area on this image |
| 01:06 | these coordinates refer to a polygon area on this image |
| 01:13 | on this image: when we will click on the circular area, we will be taken to "round_zone.php" |
| 01:22 | when we will click on the rectangular area, we will be taken to "rectangle_zone.php" |
| 01:28 | when we will click on the polygon area, we will be taken to "polygon_zone.php" |
| 01:35 | test |
| 01:41 | test result: ok the image is a client-side image map thanks to map element |
For more information about the element, please see the specs: W3C ⁄ WHATWG