Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
[a] (0) More slicing examples.
git-svn-id: http://svn.whatwg.org/webapps@1979 340c8d12-0b0e-0410-8428-c7bf67bfef74
- Loading branch information
| containing the letters "XYZ" and the second with the word "Corp". The | ||
| alternative text ("XYZ Corp") is all in the first image.</p> | ||
|
|
||
| <pre><h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1></pre> | ||
| <pre><h1><strong><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></strong></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 | ||
| "★★★☆☆", 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><p>Rating: <strong><img src="1" alt="3/5"><img src="1" alt=""><img src="1" alt="" | ||
| ><img src="0" alt=""><img src="0" alt=""></strong></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><h1>The Church</h1> | ||
| <p>You come across a flying spaghetti monster. Which side of His | ||
| Noodliness do you wish to reach out for?</p> | ||
| <strong><p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a | ||
| ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></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> | ||
|
|
| "Corp". The alternative text ("XYZ Corp") is all in the first | ||
| image.</p> | ||
|
|
||
| <pre><h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1></pre> | ||
| <pre><h1><strong><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></strong></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 "★★★☆☆", 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><p>Rating: <strong><img src="1" alt="3/5"><img src="1" alt=""><img src="1" alt="" | ||
| ><img src="0" alt=""><img src="0" alt=""></strong></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><h1>The Church</h1> | ||
| <p>You come across a flying spaghetti monster. Which side of His | ||
| Noodliness do you wish to reach out for?</p> | ||
| <strong><p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a | ||
| ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p></strong></pre> | ||
|
|
||
| </div> | ||
|
|
||
| <p>Generally, <span title="image map">image maps</span> should be | ||
| used instead of slicing an image for links.</p> | ||
|
|
||
|
|
||
|
|