home *** CD-ROM | disk | FTP | other *** search
/ Computer Shopper 133 / dpcs0399.iso / INTERNET / COFFEE / HTMLED55 / SETUP.EXE / file0192.bin < prev    next >
Encoding:
Text File  |  1998-11-04  |  9.8 KB  |  118 lines
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  2.    "http://www.w3.org/TR/REC-html40/strict.dtd">
  3. <html lang=en-us>
  4. <head>
  5. <title>AREA - Image Map Region</title>
  6. <link rev=Made href="mailto:liam@htmlhelp.com">
  7. <link rel=Start href="../index.html">
  8. <link rel=Glossary href="http://www.htmlhelp.com/glossary/glossary.html">
  9. <link rel=Copyright href="http://www.htmlhelp.com/copyright.html">
  10. <link rel=StyleSheet href="../style.css" type="text/css">
  11. <link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
  12. <meta http-equiv="Content-Script-Type" content="text/javascript">
  13. <meta name="author" content="Liam Quinn">
  14. <meta name="description" content="A description of HTML 4.0's AREA element for image map regions.">
  15. <meta name="keywords" content="AREA, area element, image map, imagemap, region, hotspot, hotzone, zone, spot, hot, click, clickable, client-side image map, client-side imagemap, CSIM, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, <area> tag, <AREA> tag">
  16. <script type="text/javascript">
  17. <!--
  18. function toggle() {
  19.   if (document.all.toggler.value == "Hide non-strict attributes") {
  20.      document.styleSheets[0].addRule("div.transitional", "display:none");
  21.      document.styleSheets[0].addRule("li.transitional", "display:none");
  22.      document.styleSheets[0].addRule(".transitional", "speak:none");
  23.      document.all.toggler.value = "Show non-strict attributes";
  24.   } else {
  25.      document.styleSheets[0].addRule("div.transitional", "display:block");
  26.      document.styleSheets[0].addRule("li.transitional", "display:list-item");
  27.      document.styleSheets[0].addRule(".transitional", "speak:inherit");
  28.      document.all.toggler.value = "Hide non-strict attributes";
  29.   }
  30. }
  31. // -->
  32. </script>
  33. </head>
  34. <body>
  35. <h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
  36. <h1>AREA - Image Map Region</h1>
  37. <script type="text/javascript">
  38. <!--
  39.   if (document.styleSheets) {
  40.     var gt;
  41.     gt = unescape(new String("%3E"));
  42.  
  43.     document.write("<p" + gt + "<input type=button value=\"Hide non-strict attributes\" id=toggler accesskey=s onclick=\"toggle()\"" + gt + "<\/p" + gt);
  44.   }
  45. // -->
  46. </script>
  47. <table>
  48.   <tr valign=top>
  49.     <th>Syntax</th>
  50.     <td><strong class=required><AREA></strong></td>
  51.   </tr>
  52.   <tr valign=top>
  53.     <th>Attribute Specifications</th>
  54.     <td>
  55.       <ul>
  56.         <li>SHAPE=[ <em class=default>rect</em> | circle | poly | defaultá] (shape of region)</li>
  57.         <li>COORDS=<var><a href="#coords">Coords</a></var> (coordinates of region)</li>
  58.         <li>HREF=<var><a href="../values.html#uri">URI</a></var> (linked resource)</li>
  59.         <li class=transitional>TARGET=<var><a href="../values.html#frametarget">FrameTarget</a></var> (frame to render link in)</li>
  60.         <li>NOHREF (inactive region)</li>
  61.         <li><strong class=required>ALT=<var><a href="../values.html#text">Text</a></var> (alternate text)</strong></li>
  62.         <li>TABINDEX=<var><a href="../values.html#number">Number</a></var> (position in tabbing order)</li>
  63.         <li>ONFOCUS=<var><a href="../values.html#script">Script</a></var> (region received focus)</li>
  64.         <li>ONBLUR=<var><a href="../values.html#script">Script</a></var> (region lost focus)</li>
  65.         <li><a href="../attrs.html">common attributes</a></li>
  66.       </ul>
  67.     </td>
  68.   </tr>
  69.   <tr valign=top>
  70.     <th>Contents</th>
  71.     <td>Empty</td>
  72.   </tr>
  73.   <tr valign=top>
  74.     <th>Contained in</th>
  75.     <td><a href="map.html">MAP</a></td>
  76.   </tr>
  77. </table>
  78. <p>The <strong class=html>AREA</strong> element defines a <em>map region</em> in a <a href="map.html">client-side image map</a>. Each map region is a piece of the image with a different action when clicked.</p>
  79. <p>The <strong class=html>SHAPE</strong> and <strong class=html><a name=coords>COORDS</a></strong> attributes of <strong class=html>AREA</strong> specify what part of the image is included in the region. The default <strong class=html>SHAPE</strong> value is <strong class=html>rect</strong>, which defines a rectangular region using <strong class=html>COORDS="<var>left</var>, <var>top</var>, <var>right</var>, <var>bottom</var>"</strong>. Other <strong class=html>SHAPE</strong> values are</p>
  80. <ul>
  81.   <li><strong class=html>default</strong>, which specifies the entire image;</li>
  82.   <li><strong class=html>circle</strong>, which specifies a circular region using <strong class=html>COORDS="<var>center-x</var>, <var>center-y</var>, <var>radius</var>"</strong>;</li>
  83.   <li><strong class=html>poly</strong>, which specifies a polygonal region using <strong class=html>COORDS="<var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var>, <var>...</var>, <var>x<sub>N</sub></var>, <var>y<sub>N</sub></var>"</strong>.</li>
  84. </ul>
  85. <p>Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.</p>
  86. <p>The <strong class=html>HREF</strong> attribute specifies a link to another resource, such as an <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document or a <acronym title="Joint Photographic Experts Group">JPEG</acronym> image. The <strong class=html>TITLE</strong> attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. The boolean <strong class=html>NOHREF</strong> attribute indicates that the region has no link.</p>
  87. <p>The required <strong class=html>ALT</strong> attribute provides alternate text for those not loading images. Effective <strong class=html>ALT</strong> text should generally give the <em>function</em> of the map region rather than a <em>description</em> of the region. For example, <strong class=html>ALT="WDG Home"</strong> or <strong class=html>ALT="Web Design Group"</strong> would be more appropriate than <strong class=html>ALT="WDG Logo"</strong> for a map region whose link went to the <a href="http://www.htmlhelp.com/"><abbr class=initialism title="Web Design Group">WDG</abbr> home page</a>. Good <strong class=html>ALT</strong> text is crucial to the document's accessibility for the significant portion of users who do not load images.</p>
  88. <div class=transitional>
  89. <p><a name="target">The <strong class=html>TARGET</strong> attribute</a> is used with <a href="../frames/index.html">frames</a> to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:</p>
  90. <ul>
  91.   <li><strong class=html>_blank</strong> renders the link in a new, unnamed window</li>
  92.   <li><strong class=html>_self</strong> renders the link in the current frame (useful for overriding a <strong class=html><a href="../head/base.html">BASE</a> TARGET</strong>)</li>
  93.   <li><strong class=html>_parent</strong> renders the link in the immediate <strong class=html><a href="../frames/frameset.html">FRAMESET</a></strong> parent</li>
  94.   <li><strong class=html>_top</strong> renders the link in the full, unframed window</li>
  95. </ul>
  96. </div>
  97. <p>The <strong class=html>ACCESSKEY</strong> attribute specifies a single Unicode character as a shortcut key for following the link. <a href="../entities/index.html">Entities</a> (<abbr title="for example"><i lang=la>e.g.</i></abbr> <strong class=html>&eacute;</strong>) may be used as the <strong class=html>ACCESSKEY</strong> value.</p>
  98. <p>The <strong class=html>TABINDEX</strong> attribute specifies a number between 0 and 32767 to indicate the tabbing order of the map region. A region with <strong class=html>TABINDEX=0</strong> or no <strong class=html>TABINDEX</strong> attribute will be visited after any elements with a positive <strong class=html>TABINDEX</strong>. Among positive <strong class=html>TABINDEX</strong> values, the lower number receives focus first. In the case of a tie, the element appearing first in the <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document takes precedence.</p>
  99. <p>In addition to the <a href="../attrs.html#events">core events</a> common to most elements, <strong class=html>AREA</strong> accepts the following event attributes for client-side scripting:</p>
  100. <ul>
  101.   <li><strong class=html>ONFOCUS</strong>, when the region receives focus;</li>
  102.   <li><strong class=html>ONBLUR</strong>, when the region loses focus.</li>
  103. </ul>
  104. <h2>More Information</h2>
  105. <ul>
  106.   <li><a href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-AREA">AREA in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTMLá4.0 Recommendation</a></li>
  107.   <li><a href="http://www.w3.org/TR/REC-html32#map">AREA in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTMLá3.2 Recommendation</a></li>
  108.   <li><a href="http://www.htmlhelp.com/reference/wilbur/special/area.html">AREA in <abbr class=initialism title="Web Design Group">WDG</abbr> HTMLá3.2 Reference</a></li>
  109.   <li><a href="http://www.hut.fi/u/jkorpela/HTML3.2/5.5.html">AREA in <cite>Learning HTMLá3.2 by Examples</cite></a></li>
  110. </ul>
  111. <div class=footer>
  112. <address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> <<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>></address>
  113. <p class=toolbar><a href="http://www.htmlhelp.com/"><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~"></a> <a href="../index.html" rel=Start>HTMLá4.0áReference</a>á~ <a href="../olist.html">ElementsábyáFunction</a>á~ <a href="../alist.html">ElementsáAlphabetically</a></p>
  114. <p class=copyright><a href="http://www.htmlhelp.com/copyright.html">Copyright ⌐</a> 1998 Liam Quinn. All rights reserved.</p>
  115. </div>
  116. </body>
  117. </html>
  118.