[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