Permalink
Browse files

[a] (0) More slicing examples.

git-svn-id: http://svn.whatwg.org/webapps@1979 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 54af79c commit b80d795736a744b3d27af2845affff0319e6685c @Hixie Hixie committed Aug 4, 2008
Showing with 60 additions and 11 deletions.
  1. +28 −5 index
  2. +32 −6 source
View
33 index
@@ -16277,17 +16277,40 @@ The island of Shalott.&lt;/p></pre>
containing the letters "XYZ" and the second with the word "Corp". The
alternative text ("XYZ Corp") is all in the first image.</p>
- <pre>&lt;h1>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt="">&lt;/h1></pre>
+ <pre>&lt;h1><strong>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt=""></strong>&lt;/h1></pre>
+ </div>
+
+ <div class=example>
+ <p>In the following example, a rating is shown as three filled stars and
+ two empty stars. While the alternative text could have been
+ "&#x2605;&#x2605;&#x2605;&#x2606;&#x2606;", the author has instead
+ decided to more helpfully give the rating in the form "3/5". That is the
+ alternative text of the first image, and the rest have blank alternative
+ text.</p>
+
+ <pre>&lt;p>Rating: <strong>&lt;img src="1" alt="3/5">&lt;img src="1" alt="">&lt;img src="1" alt=""
+>&lt;img src="0" alt="">&lt;img src="0" alt=""></strong>&lt;/p></pre>
</div>
<p>If any of the components of the sliced picture are the sole contents of
links, then instead one image per link must have alternative text
representing the purpose of the link.
- <p>Generally, authors should avoid slicing images in this way, as it can
- lead to unexpected renderings (e.g. if the line wraps in an unexpected
- way, the image would get broken up). In the case of links, <a
- href="#image2" title="image map">image maps</a> should be used instead.
+ <div class=example>
+ <p>In the following example, a picture representing the flying spaghetti
+ monster emblem, with each of the left noodly appendages and the right
+ noodly appendages in different images, so that the user can pick the left
+ side or the right side in an adventure.</p>
+
+ <pre>&lt;h1>The Church&lt;/h1>
+&lt;p>You come across a flying spaghetti monster. Which side of His
+Noodliness do you wish to reach out for?&lt;/p>
+<strong>&lt;p>&lt;a href="?go=left" >&lt;img src="fsm-left.png" alt="Left side. ">&lt;/a
+ >&lt;a href="?go=right">&lt;img src="fsm-right.png" alt="Right side.">&lt;/a>&lt;/p></strong></pre>
+ </div>
+
+ <p>Generally, <a href="#image2" title="image map">image maps</a> should be
+ used instead of slicing an image for links.
<h6 id=a-key><span class=secno>4.7.2.1.8. </span>A key part of the content</h6>
View
38 source
@@ -13860,19 +13860,45 @@ The island of Shalott.&lt;/p></pre>
"Corp". The alternative text ("XYZ Corp") is all in the first
image.</p>
- <pre>&lt;h1>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt="">&lt;/h1></pre>
+ <pre>&lt;h1><strong>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt=""></strong>&lt;/h1></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>In the following example, a rating is shown as three filled
+ stars and two empty stars. While the alternative text could have
+ been "&#x2605;&#x2605;&#x2605;&#x2606;&#x2606;", the author has
+ instead decided to more helpfully give the rating in the form
+ "3/5". That is the alternative text of the first image, and the
+ rest have blank alternative text.</p>
+
+ <pre>&lt;p>Rating: <strong>&lt;img src="1" alt="3/5">&lt;img src="1" alt="">&lt;img src="1" alt=""
+>&lt;img src="0" alt="">&lt;img src="0" alt=""></strong>&lt;/p></pre>
</div>
<p>If any of the components of the sliced picture are the sole
contents of links, then instead one image per link must have
alternative text representing the purpose of the link.</p>
- <p>Generally, authors should avoid slicing images in this way, as it
- can lead to unexpected renderings (e.g. if the line wraps in an
- unexpected way, the image would get broken up). In the case of
- links, <span title="image map">image maps</span> should be used
- instead.</p>
+ <div class="example">
+
+ <p>In the following example, a picture representing the flying
+ spaghetti monster emblem, with each of the left noodly appendages
+ and the right noodly appendages in different images, so that the
+ user can pick the left side or the right side in an adventure.</p>
+
+ <pre>&lt;h1>The Church&lt;/h1>
+&lt;p>You come across a flying spaghetti monster. Which side of His
+Noodliness do you wish to reach out for?&lt;/p>
+<strong>&lt;p>&lt;a href="?go=left" >&lt;img src="fsm-left.png" alt="Left side. ">&lt;/a
+ >&lt;a href="?go=right">&lt;img src="fsm-right.png" alt="Right side.">&lt;/a>&lt;/p></strong></pre>
+
+ </div>
+
+ <p>Generally, <span title="image map">image maps</span> should be
+ used instead of slicing an image for links.</p>

0 comments on commit b80d795

Please sign in to comment.