Skip to content
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
Hixie committed Aug 4, 2008
1 parent 54af79c commit b80d795736a744b3d27af2845affff0319e6685c
Showing with 60 additions and 11 deletions.
  1. +28 −5 index
  2. +32 −6 source
33 index
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>

38 source
"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.
You can’t perform that action at this time.