- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 22 Aug 2008 00:48:07 +0000
- To: public-html-commits@w3.org
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