<map>

  • Revision slug: HTML/Element/map
  • Revision title: <map>
  • Revision id: 344937
  • Created:
  • Creator: medicdude
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <map> element is used with {{HTMLElement("area")}} elements to define a image map.

For explanation of html image maps visit: Learn rectangle,circle and polygon image maps.

Attributes

This element only includes the global attributes.

Examples

<map>
  <area shape="circle" coords="200,250,25" href="another.htm" /> 
  <area shape="default" />
</map>

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '<map>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-map-element.html#the-map-element', '<map>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'objects.html#h-13.6.1', '<map>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatGeckoDesktop(1.0)}} [1][2] {{CompatVersionUnknown}} 1.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile(1.0)}} [1][2] {{CompatVersionUnknown}} 1.0 1.0

Gecko notes

[1] Starting in Gecko 5.0 {{geckoRelease("5.0")}}, empty maps are no longer skipped over in favor of non-empty ones when matching when in quirks mode. For example, consider the following HTML:

<map name=a></map>
<map name=a>
  <area shape=rect coords=25,25,75,75 href=#fail>
</map>
<img usemap=#a src=image.png>

Prior to Gecko 5.0, the {{HTMLElement("img")}} element would have matched to the second, non-empty map. Now it matches against the first one, even though it's empty.

[2] From Firefox 17 the default styling of the <map> HTML element is display: inline; and no more display: block;. This matches the behavior of the other browsers and was already the case in quirks mode.

See also

  • {{HTMLElement("a")}}
  • {{HTMLElement("area")}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;map&gt;</code> element</strong> is used with {{HTMLElement("area")}} elements to define a image map.</p>
<p>For explanation of html image maps visit: <a href="http://www.html-tutorials.net/map.html" title="http://www.html-tutorials.net/map.html">Learn rectangle,circle and polygon image maps.</a></p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li>
  <li><dfn>Permitted content</dfn> Any <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="https://developer.mozilla.org/en/HTML/Content_categories#Transparent_content_model">transparent</a> element.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLMapElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;map&gt;
&nbsp;&nbsp;&lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt; 
&nbsp;&nbsp;&lt;area shape="default" /&gt;
&lt;/map&gt;
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '&lt;map&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-map-element.html#the-map-element', '&lt;map&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop(1.0)}} [1][2]</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>1.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile(1.0)}} [1][2]</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>1.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>[1] Starting in Gecko 5.0 {{geckoRelease("5.0")}}, empty maps are no longer skipped over in favor of non-empty ones when matching when in quirks mode. For example, consider the following HTML:</p>
<pre class="brush: html">
&lt;map name=a&gt;&lt;/map&gt;
&lt;map name=a&gt;
&nbsp;&nbsp;&lt;area shape=rect coords=25,25,75,75 href=#fail&gt;
&lt;/map&gt;
&lt;img usemap=#a src=image.png&gt;
</pre>
<p>Prior to Gecko 5.0, the {{HTMLElement("img")}}&nbsp;element would have matched to the second, non-empty map. Now it matches against the first one, even though it's empty.</p>
<p>[2] From Firefox 17 the default styling of the <code>&lt;map&gt;</code> HTML element is <code>display: inline;</code> and no more <code>display: block;</code>. This matches the behavior of the other browsers and was already the case in quirks mode.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{HTMLElement("a")}}</li>
  <li>{{HTMLElement("area")}}</li>
</ul>
Revert to this revision