<map>: The Image Map element #

::: section-content The <map> HTML element is used with <area> elements to define an image map (a clickable link area). :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <map> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor} ::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} img { display: block; margin: 0 auto; width: 260px; height: 232px; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element includes the global attributes.

name

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another <map> element in the same document. If the id attribute is also specified, both attributes must have the same value. :::

Examples #

Image map with two areas #

::: section-content Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML #

::: code-example [html]{.language-name}

<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="350 x 150 picture of two parrots" />

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-map-element]{.small}

:::

Browser compatibility #

::: _table #

       Desktop                                                           Mobile                                           

       Chrome    Edge   Firefox              Internet   Opera   Safari   WebView   Chrome    Firefox   Opera     Safari   Samsung
                                             Explorer                    Android   Android   for       Android   on IOS   Internet
                                                                                             Android                      

map 1 12 1 Yes 15 1 4.4 18 4 14 1 1.0

                        \[\"Before Firefox                                                                                
                        5, in Quirks Mode,                                                                                
                        empty maps were no                                                                                
                        longer skipped over                                                                               
                        in favor of                                                                                       
                        non-empty ones when                                                                               
                        matching.\",                                                                                      
                        \"Before Firefox 17,                                                                              
                        the default styling                                                                               
                        of the `<map>` HTML                                                                               
                        element was                                                                                       
                        `display: block;`.                                                                                
                        This is now                                                                                       
                        `display: inline;`                                                                                
                        and matches the                                                                                   
                        behavior of the                                                                                   
                        other browsers. It                                                                                
                        was already the case                                                                              
                        in Quirks Mode.\"\]                                                                               

name 1 12 1 Yes 15 1 4.4 18 4 14 1 1.0 #

:::

See also #

::: section-content

• <a>
• <area> :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map{._attribution-link} :::