diff options
Diffstat (limited to 'devdocs/html/element%2Farea.html')
| -rw-r--r-- | devdocs/html/element%2Farea.html | 293 |
1 files changed, 293 insertions, 0 deletions
diff --git a/devdocs/html/element%2Farea.html b/devdocs/html/element%2Farea.html new file mode 100644 index 00000000..01bacab7 --- /dev/null +++ b/devdocs/html/element%2Farea.html @@ -0,0 +1,293 @@ +<header><h1><area>: The Image Map Area element</h1></header><div class="section-content"> +<p>The <code><area></code> <a href="../index">HTML</a> element defines an area inside an image map that has predefined clickable areas. An <em>image map</em> allows geometric areas on an image to be associated with <a href="https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink">hypertext links</a>.</p> <p>This element is used only within a <a href="map"><code><map></code></a> element.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/area.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="alt"><a href="#alt"><code>alt</code></a></dt> <dd> <p> A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. This attribute is required only if the <a href="#href"><code>href</code></a> attribute is used. </p> </dd> <dt id="coords"><a href="#coords"><code>coords</code></a></dt> <dd> <p> The <code>coords</code> attribute details the coordinates of the <a href="#shape"><code>shape</code></a> attribute in size, shape, and placement of an <code><area></code>. This attribute must not be used if <code>shape</code> is set to <code>default</code>. </p> <ul> <li> <code>rect</code>: the value is <code>x1,y1,x2,y2</code>. The value specifies the coordinates of the top-left and bottom-right corner of the rectangle. For example, in <code><area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"></code> the coordinates are <code>0,0</code> and <code>253,27</code>, indicating the top-left and bottom-right corners of the rectangle, respectively. </li> <li> <code>circle</code>: the value is <code>x,y,radius</code>. Value specifies the coordinates of the circle center and the radius. For example: <code><area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"></code> </li> <li> <code>poly</code>: the value is <code>x1,y1,x2,y2,..,xn,yn</code>. Value specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon </li> </ul> <p>The values are numbers of CSS pixels.</p> </dd> <dt id="download"><a href="#download"><code>download</code></a></dt> <dd> <p> This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See <a href="a"><code><a></code></a> for a full description of the <a href="a#download"><code>download</code></a> attribute. </p> </dd> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p> The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the <code><area></code> element does not represent a hyperlink. </p> </dd> <dt id="ping"><a href="#ping"><code>ping</code></a></dt> <dd> <p> Contains a space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking. </p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>A string indicating which referrer to use when fetching the resource:</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> <code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins. </li> </ul> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p> For anchors containing the <a href="#href"><code>href</code></a> attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <a href="#href"><code>href</code></a> attribute is present. </p> </dd> <dt id="shape"><a href="#shape"><code>shape</code></a></dt> <dd> <p>The shape of the associated hot spot. The specifications for HTML defines the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes.</p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p> A keyword or author-defined name of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a> to display the linked resource. The following keywords have special meanings: </p> <ul> <li> +<code>_self</code> (default): Show the resource in the current browsing context.</li> <li> +<code>_blank</code>: Show the resource in a new, unnamed browsing context.</li> <li> <code>_parent</code>: Show the resource in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as <code>_self</code>. </li> <li> <code>_top</code>: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as <code>_self</code>. </li> </ul> <p>Use this attribute only if the <a href="#href"><code>href</code></a> attribute is present.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting <code>target="_blank"</code> on <code><area></code> elements implicitly provides the same <code>rel</code> behavior as setting <a href="../attributes/rel/noopener"><code>rel="noopener"</code></a> which does not set <code>window.opener</code>. See <a href="#browser_compatibility">browser compatibility</a> for support status.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eexpAr/h5d5NM7csPCY0GcBX6WR4gyryBvocboa2zzU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> + <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> + <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75,75,75<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left.html<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to go Left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> + <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> + <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>275,75,75<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right.html<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to go Right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>map</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#primary<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://via.placeholder.com/350x150<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>350 x 150 pic<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="360" height="160" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/area/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. The <code><area></code> element must have an ancestor <a href="map"><code><map></code></a>, but it need not be a direct parent.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a> when <a href="area#href" aria-current="page"><code>href</code></a> attribute is present, otherwise <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"><code>generic</code></a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element">HTML Standard <br><small># the-area-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>area</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>accesskey</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>alt</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>coords</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>download</code></th> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">6.0</td> +</tr> +<tr> +<th><code>href</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>implicit_noopener</code></th> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">15.0</td> +</tr> +<tr> +<th><code>nohref</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>ping</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>rel</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>shape</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>tabindex</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>target</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area</a> + </p> +</div> |