<map>

  • Revision slug: HTML/Element/map
  • Revision title: map
  • Revision id: 287232
  • Created:
  • Creator: FreakCERS
  • Is current revision? No
  • Comment 1 words added

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 HTMLAnchorElement 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) }}

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. See the section {{ anch("Gecko notes") }} below.

{{ CompatVersionUnknown() }} 1.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile(1.0) }} {{ CompatVersionUnknown() }} 1.0 1.0

Gecko notes

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.

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 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 <code><a href="/en/DOM/HTMLAnchorElement" title="en/DOM/HTMLAnchorElement">HTMLAnchorElement</a></code> interface.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">&lt;map&gt;
  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt; 
  &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) }}</p> <p>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. See the section {{ anch("Gecko notes") }} below.</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) }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>1.0</td> <td>1.0</td> </tr> </tbody>
</table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>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;
  &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") }} element would have matched to the second, non-empty map. Now it matches against the first one, even though it's empty.</p>
<h2 id="See_also">See also</h2>
<ul> <li>{{ HTMLElement("a") }}</li> <li>{{ HTMLElement("area") }}</li>
</ul>
Revert to this revision