[html5] r2101 - / images

whatwg at whatwg.org whatwg at whatwg.org
Thu Aug 21 17:48:18 PDT 2008


Author: ianh
Date: 2008-08-21 17:48:16 -0700 (Thu, 21 Aug 2008)
New Revision: 2101

Added:
   images/sample-usemap.png
Modified:
   index
   source
Log:
[e] (0) Add an example for image maps.

Added: images/sample-usemap.png
===================================================================
(Binary files differ)


Property changes on: images/sample-usemap.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream

Modified: index
===================================================================
--- index	2008-08-21 23:33:50 UTC (rev 2100)
+++ index	2008-08-22 00:48:16 UTC (rev 2101)
@@ -28,7 +28,7 @@
 
    <h1 id=html-5>HTML 5</h1>
 
-   <h2 class="no-num no-toc" id=draft>Draft Recommendation — 21 August
+   <h2 class="no-num no-toc" id=draft>Draft Recommendation — 22 August
     2008</h2>
 
    <p>You can take part in this work. <a
@@ -950,7 +950,14 @@
 
        <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>
 
        <li><a href="#svg"><span class=secno>4.7.16 </span>SVG</a>
@@ -997,7 +1004,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
@@ -1047,7 +1054,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.
@@ -1183,7 +1190,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.
@@ -1353,7 +1360,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.
@@ -1472,7 +1479,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>
 
@@ -23958,7 +23965,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.
 
@@ -24043,6 +24050,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>.
 
@@ -24057,6 +24066,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
@@ -25358,7 +25394,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>.
@@ -26315,7 +26351,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>
@@ -30883,7 +30919,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"
@@ -35353,7 +35389,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"
@@ -38109,7 +38145,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

Modified: source
===================================================================
--- source	2008-08-21 23:33:50 UTC (rev 2100)
+++ source	2008-08-22 00:48:16 UTC (rev 2101)
@@ -21187,7 +21187,7 @@
   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
+  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.</p>
@@ -21274,6 +21274,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>Authoring</h5>
+
   <p>An <dfn>image map</dfn> allows geometric areas on an image to be
   associated with <span title="hyperlink">hyperlinks</span>.</p>
 
@@ -21287,6 +21289,36 @@
   be a <span>valid hash-name reference</span> to a <code>map</code>
   element.</p>
 
+  <div class="example">
+
+   <p>Consider an image that looks as follows:</p>
+
+   <p><img src="images/sample-usemap.png" 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."></p>
+
+   <p>If we wanted just the coloured areas to be clickable, we could
+   do it as follows:</p>
+
+   <pre>
+<p>
+ Please select a shape:
+ <img src="shapes.png" usemap="#shapes"
+      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
+ <map name="shapes">
+  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
+  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
+  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
+  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
+  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
+        href="yellow.html" alt="Yellow star.">
+ </map>
+</p>
+</pre>
+
+  </div>
+
+
+  <h5>Processing model</h5>
+
   <p>If an <code>img</code> element or an <code>object</code> element
   representing an image has a <code
   title="attr-area-usemap">usemap</code> attribute specified, user
@@ -21548,6 +21580,7 @@
   maps.</p>
 
 
+
   <h4>MathML</h4>
 
   <p>The <code>math</code> element from the <span>MathML




More information about the Commit-Watchers mailing list