HTML <map> Tag
The <map> element is used together with the <area> element to define an image map.
The <map> element contains many <area> elements, which define the clickable areas of the image for users to click to get relevant information.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
name |
mapname | Required. This attribute provides a name of the image map. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<img src="imageformap.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Laptop" title="Laptop" href="basic/html-iFrame.jsp" coords="180,0,394,161" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="images/html-background-image.jsp" coords="69,8,63,10,59,14,56,21,53,26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6" shape="poly">
<area target="_blank" alt="Note" title="Note" href="basic/html-emojis.jsp" coords="3,111,138,85,170,247,30,276" shape="poly">
</map>Click on the "Try it Now" button to see how it works.