html5/spec Overview.html,1.1273,1.1274

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv32553

Modified Files:
	Overview.html 
Log Message:
Add an example for image maps. (whatwg r2101)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1273
retrieving revision 1.1274
diff -u -d -r1.1273 -r1.1274
--- Overview.html	21 Aug 2008 23:33:39 -0000	1.1273
+++ Overview.html	22 Aug 2008 00:48:05 -0000	1.1274
@@ -27,7 +27,7 @@
     for HTML and XHTML</h2>
 
    <h2 class="no-num no-toc" id=editors0><!-- "W3C Working Draft" -->
-    Editor's Draft <!--ZZZ-->21 August 2008</h2>
+    Editor's Draft <!--ZZZ-->22 August 2008</h2>
 
    <dl><!-- ZZZ: update the month/day
     <dt>This Version:</dt>
@@ -199,7 +199,7 @@
 
   <p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working Group</a> is
    the W3C working group responsible for this specification's progress along
-   the W3C Recommendation track. <!--ZZZ:--> This specification is the 21
+   the W3C Recommendation track. <!--ZZZ:--> This specification is the 22
    August 2008 <!--ZZZ "Working Draft"-->Editor's Draft. <!--:ZZZ--></p>
   <!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
   <!-- relationship to other work (required) -->
@@ -958,6 +958,13 @@
 
        <li><a href="#image-maps"><span class=secno>4.7.14 </span>Image
         maps</a>
+        <ul class=toc>
+         <li><a href="#authoring"><span class=secno>4.7.14.1.
+          </span>Authoring</a>
+
+         <li><a href="#processing"><span class=secno>4.7.14.2.
+          </span>Processing model</a>
+        </ul>
 
        <li><a href="#mathml"><span class=secno>4.7.15 </span>MathML</a>
 
@@ -1005,7 +1012,7 @@
        <li><a href="#attributes0"><span class=secno>4.8.12 </span>Attributes
         common to <code>td</code> and <code>th</code> elements</a>
 
-       <li><a href="#processing"><span class=secno>4.8.13 </span>Processing
+       <li><a href="#processing0"><span class=secno>4.8.13 </span>Processing
         model</a>
         <ul class=toc>
          <li><a href="#forming"><span class=secno>4.8.13.1. </span>Forming a
@@ -1055,7 +1062,7 @@
        <li><a href="#the-output"><span class=secno>4.9.12 </span>The
         <code>output</code> element</a>
 
-       <li><a href="#processing0"><span class=secno>4.9.13 </span>Processing
+       <li><a href="#processing1"><span class=secno>4.9.13 </span>Processing
         model</a>
         <ul class=toc>
          <li><a href="#form-submission"><span class=secno>4.9.13.1.
@@ -1191,7 +1198,7 @@
        <li><a href="#global0"><span class=secno>4.12.5 </span>Global
         attributes for data templates</a>
 
-       <li><a href="#processing1"><span class=secno>4.12.6 </span>Processing
+       <li><a href="#processing2"><span class=secno>4.12.6 </span>Processing
         model</a>
         <ul class=toc>
          <li><a href="#the-originalcontent"><span class=secno>4.12.6.1.
@@ -1361,7 +1368,7 @@
        <li><a href="#updating1"><span class=secno>5.7.4 </span>Updating an
         application cache</a>
 
-       <li><a href="#processing2"><span class=secno>5.7.5 </span>Processing
+       <li><a href="#processing3"><span class=secno>5.7.5 </span>Processing
         model</a>
         <ul class=toc>
          <li><a href="#changesToNetworkingModel"><span class=secno>5.7.5.1.
@@ -1480,7 +1487,7 @@
 
          <li><a href="#errors"><span class=secno>5.10.2.5. </span>Errors</a>
 
-         <li><a href="#processing3"><span class=secno>5.10.2.6.
+         <li><a href="#processing4"><span class=secno>5.10.2.6.
           </span>Processing model</a>
         </ul>
 
@@ -23966,7 +23973,7 @@
    with exactly four integers, the first of which must be less than the
    third, and the second of which must be less than the fourth. The four
    points must represent, respectively, the distance from the left edge of
-   the image to the top left side of the rectangle, the distance from the top
+   the image to the left side of the rectangle, the distance from the top
    edge to the top side, the distance from the left edge to the right side,
    and the distance from the top edge to the bottom side, all in CSS pixels.
 
@@ -24051,6 +24058,8 @@
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0D%0A%3Cp%3E%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/astrophy/128%22%20usemap%3D%23a%3E%0D%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%25%22%20href%3D%23%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%22%20href%3D%23%3E%3C/map%3E%0D%0A%3Cscript%3Edocument.write%28document.getElementsByTagName%28%27area%27%29%5B0%5D.coords%29%3C/script%3E
   -->
 
+  <h5 id=authoring><span class=secno>4.7.14.1. </span>Authoring</h5>
+
   <p>An <dfn id=image2>image map</dfn> allows geometric areas on an image to
    be associated with <a href="#hyperlinks" title=hyperlink>hyperlinks</a>.
 
@@ -24065,6 +24074,33 @@
    href="#valid7">valid hash-name reference</a> to a <code><a
    href="#map">map</a></code> element.
 
+  <div class=example>
+   <p>Consider an image that looks as follows:</p>
+
+   <p><img alt="A line with four shapes in it, equally spaced: a red hollow
+    box, a green circle, a blue triangle, and a yellow four-pointed star."
+    src="images/sample-usemap.png"></p>
+
+   <p>If we wanted just the coloured areas to be clickable, we could do it as
+    follows:</p>
+
+   <pre>
+</pre>
+
+   <p> Please select a shape: <img alt="Four shapes are available: a red
+    hollow box, a green circle, a blue triangle, and a yellow four-pointed
+    star." src=shapes.png usemap="#shapes"> <map name=shapes><area
+    coords="50,50,100,100" shape=rect><!-- the hole in the red box -->
+    <area alt="Red box." coords="25,25,125,125" href=red.html
+    shape=rect><area alt="Green circle." coords="200,75,50" href=green.html
+    shape=circle><area alt="Blue triangle." coords="325,25,262,125,388,125"
+    href=blue.html shape=poly><area alt="Yellow star."
+    coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
+    href=yellow.html shape=poly></map></p>
+  </div>
+
+  <h5 id=processing><span class=secno>4.7.14.2. </span>Processing model</h5>
+
   <p>If an <code><a href="#img">img</a></code> element or an <code><a
    href="#object">object</a></code> element representing an image has a <code
    title=attr-area-usemap>usemap</code> attribute specified, user agents must
@@ -25366,7 +25402,7 @@
    title=dom-tr-cells><a href="#cells">cells</a></code> collection. If there
    is no such parent element, then the attribute must return 0.
 
-  <h4 id=processing><span class=secno>4.8.13 </span>Processing model</h4>
+  <h4 id=processing0><span class=secno>4.8.13 </span>Processing model</h4>
 
   <p>The various table elements and their content attributes together define
    the <dfn id=table0>table model</dfn>.
@@ -26323,7 +26359,7 @@
   <h4 id=the-output><span class=secno>4.9.12 </span>The <code>output</code>
    element</h4>
 
-  <h4 id=processing0><span class=secno>4.9.13 </span>Processing model</h4>
+  <h4 id=processing1><span class=secno>4.9.13 </span>Processing model</h4>
 
   <p class=big-issue>See <a
    href="http://www.whatwg.org/specs/web-forms/current-work/#extend-form-controls">WF2</a>
@@ -30891,7 +30927,7 @@
    title=attr-registrationmark><a
    href="#registrationmark">registrationmark</a></code> content attribute.
 
-  <h4 id=processing1><span class=secno>4.12.6 </span>Processing model</h4>
+  <h4 id=processing2><span class=secno>4.12.6 </span>Processing model</h4>
   <!-- ua side -->
 
   <p>The <a href="#task-source">task source</a> for all <a href="#tasks"
@@ -35361,7 +35397,7 @@
      progress. Abort the update process.
   </ol>
 
-  <h4 id=processing2><span class=secno>5.7.5 </span>Processing model</h4>
+  <h4 id=processing3><span class=secno>5.7.5 </span>Processing model</h4>
 
   <p>The processing model of application caches for offline support in Web
    applications is part of the <a href="#navigate"
@@ -38117,7 +38153,7 @@
    return an error message describing the error encountered. The message
    should be localized to the user's language.
 
-  <h5 id=processing3><span class=secno>5.10.2.6. </span>Processing model</h5>
+  <h5 id=processing4><span class=secno>5.10.2.6. </span>Processing model</h5>
 
   <p>The <dfn id=transaction0>transaction steps</dfn> are as follows. These
    steps must be run asynchronously. These steps are invoked with a

Received on Friday, 22 August 2008 00:48:44 UTC