HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
1979[Authors] More slicing examples.2008-08-04 10:04
@@ -13853,33 +13853,59 @@ The island of Shalott.&lt;/p></pre>
   empty string.</p>
 
   <div class="example">
 
    <p>In the following example, a picture representing a company logo
    for <span title="">XYZ Corp</span> has been split into two pieces,
    the first 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>
 
-  <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>
 
 
 
   <h6>A key part of the content</h6>
 
   <p>In some cases, the image is a critical part of the
   content. This could be the case, for instance, on a page that is
   part of a photo gallery. The image is the whole <em>point</em> of
   the page containing it.</p>
 

|