[e] (0) image map example

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10518 git-svn-id: http://svn.whatwg.org/webapps@5572 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Oct 1, 2010 · 9558399 · 9558399
1 parent 20eaf91
commit 9558399
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 2 deletions.
diff --git a/complete.html b/complete.html
@@ -214,7 +214,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1>Web Applications 1.0</h1>
-    <h2 class="no-num no-toc">Draft Standard &mdash; 30 September 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard &mdash; 1 October 2010</h2>
    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -33546,6 +33546,38 @@ <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code>
 
   </div>
 
+  <div class=example>
+
+   <p>Image maps can be defined in conjunction with other content on
+   the page, to ease maintenance. This example is of a page with an
+   image map at the top of the page and a corresponding set of text
+   links at the bottom.</p>
+
+   <pre>&lt;!DOCTYPE HTML&gt;
+&lt;TITLE&gt;Babies&trade;: Toys&lt;/TITLE&gt;
+&lt;HEADER&gt;
+ &lt;H1&gt;Toys&lt;/H1&gt;
+ &lt;IMG SRC="/images/menu.gif"
+      ALT="Babies&trade; navigation menu. Select a department to go to its page."
+      USEMAP="#NAV"&gt;
+&lt;/HEADER&gt;
+ ...
+&lt;FOOTER&gt;
+ &lt;MAP NAME="NAV"&gt;
+  &lt;P&gt;
+   &lt;A HREF="/clothes/"&gt;Clothes&lt;/A&gt;
+   &lt;AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"&gt; |
+   &lt;A HREF="/toys/"&gt;Toys&lt;/A&gt;
+   &lt;AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"&gt; |
+   &lt;A HREF="/food/"&gt;Food&lt;/A&gt;
+   &lt;AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"&gt; |
+   &lt;A HREF="/books/"&gt;Books&lt;/A&gt;
+   &lt;AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/"&gt;
+ &lt;/MAP&gt;
+&lt;/FOOTER&gt;</pre>
+
+  </div>
+
 
 
   <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
@@ -33771,6 +33803,7 @@ <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</cod
   </div>
 
 
+
   <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
 
   <!-- TESTS

diff --git a/index b/index
@@ -218,7 +218,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1>HTML5 (including next generation additions still in development)</h1>
-    <h2 class="no-num no-toc">Draft Standard &mdash; 30 September 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard &mdash; 1 October 2010</h2>
    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -33526,6 +33526,38 @@ function AddCloud(data, x, y) { ... }</pre>
 
   </div>
 
+  <div class=example>
+
+   <p>Image maps can be defined in conjunction with other content on
+   the page, to ease maintenance. This example is of a page with an
+   image map at the top of the page and a corresponding set of text
+   links at the bottom.</p>
+
+   <pre>&lt;!DOCTYPE HTML&gt;
+&lt;TITLE&gt;Babies&trade;: Toys&lt;/TITLE&gt;
+&lt;HEADER&gt;
+ &lt;H1&gt;Toys&lt;/H1&gt;
+ &lt;IMG SRC="/images/menu.gif"
+      ALT="Babies&trade; navigation menu. Select a department to go to its page."
+      USEMAP="#NAV"&gt;
+&lt;/HEADER&gt;
+ ...
+&lt;FOOTER&gt;
+ &lt;MAP NAME="NAV"&gt;
+  &lt;P&gt;
+   &lt;A HREF="/clothes/"&gt;Clothes&lt;/A&gt;
+   &lt;AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"&gt; |
+   &lt;A HREF="/toys/"&gt;Toys&lt;/A&gt;
+   &lt;AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"&gt; |
+   &lt;A HREF="/food/"&gt;Food&lt;/A&gt;
+   &lt;AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"&gt; |
+   &lt;A HREF="/books/"&gt;Books&lt;/A&gt;
+   &lt;AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/"&gt;
+ &lt;/MAP&gt;
+&lt;/FOOTER&gt;</pre>
+
+  </div>
+
 
 
   <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
@@ -33751,6 +33783,7 @@ function AddCloud(data, x, y) { ... }</pre>
   </div>
 
 
+
   <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
 
   <!-- TESTS

diff --git a/source b/source
@@ -37091,6 +37091,38 @@ function AddCloud(data, x, y) { ... }</pre>
 
   </div>
 
+  <div class="example">
+
+   <p>Image maps can be defined in conjunction with other content on
+   the page, to ease maintenance. This example is of a page with an
+   image map at the top of the page and a corresponding set of text
+   links at the bottom.</p>
+
+   <pre>&lt;!DOCTYPE HTML>
+&lt;TITLE>Babies&trade;: Toys&lt;/TITLE>
+&lt;HEADER>
+ &lt;H1>Toys&lt;/H1>
+ &lt;IMG SRC="/images/menu.gif"
+      ALT="Babies&trade; navigation menu. Select a department to go to its page."
+      USEMAP="#NAV">
+&lt;/HEADER>
+ ...
+&lt;FOOTER>
+ &lt;MAP NAME="NAV">
+  &lt;P>
+   &lt;A HREF="/clothes/">Clothes&lt;/A>
+   &lt;AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
+   &lt;A HREF="/toys/">Toys&lt;/A>
+   &lt;AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
+   &lt;A HREF="/food/">Food&lt;/A>
+   &lt;AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
+   &lt;A HREF="/books/">Books&lt;/A>
+   &lt;AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
+ &lt;/MAP>
+&lt;/FOOTER></pre>
+
+  </div>
+
 
 
   <h4>The <dfn><code>area</code></dfn> element</h4>
@@ -37371,6 +37403,7 @@ function AddCloud(data, x, y) { ... }</pre>
   </div>
 
 
+
   <h4 id="image-maps">Image maps</h4>
 
   <!-- TESTS