Revision 297022 of <map>

  • Revision slug: HTML/Element/map
  • Revision title: map
  • Revision id: 297022
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

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

Usage context

Permitted content Transparent
Tag omission None, must have both a start tag and an end tag.
Permitted parent elements Any element that accepts phrasing content, or any element that accepts flow content.
Normative documents HTML 5, section 4.8.12; HTML 4.01, section 13.6.1

Attributes

Like all other HTML elements, this element has the global attributes.

DOM interface

This element implements the {{ domxref("HTMLMapElement") }} interface.

Examples

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

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 HTML <em>Map</em> element (<code>&lt;map&gt;</code>) is used with {{ HTMLElement("area") }} elements to define a image map.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Permitted content</td>
      <td><a href="/en/HTML/Content_categories#Transparent_content_model" title="https://developer.mozilla.org/en/HTML/Content_categories#Transparent_content_model">Transparent</a></td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>None, must have both a start tag and an end tag.</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>Any element that accepts <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>.</td>
    </tr>
    <tr>
      <td>Normative documents</td>
      <td><a class="external" href="http://www.w3.org/TR/html5/the-map-element.html#the-map-element" title="http://www.w3.org/TR/html5/the-map-element.html#the-map-element">HTML 5, section 4.8.12</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1" title="http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1">HTML 4.01, section 13.6.1</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>Like all other HTML&nbsp;elements, this element has the <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>.</p>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the {{ domxref("HTMLMapElement") }} interface.</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="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>
          <p>{{ CompatGeckoDesktop(1.0) }} [1][2]</p>
        </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