W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

map ... ⁄map

Share it

map intro map optional, occurrences map browser display map parents - children map transparent content model map syntaxmap name attribute

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

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children map

Attributes map

Syntax map

1<map> ... </map> »video

Attributes and Values map (comma separated)

<mapattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.name=text»video<map name="pirate_map"> ... <⁄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<map name="pirate_map" id="pirate_map"> .. <⁄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 map element, please see the specs: W3CWHATWG