html5/alt-techniques Overview.html,1.21,1.22

Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv27150

Modified Files:
	Overview.html 
Log Message:
started on sliced images techniques

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.21
retrieving revision 1.22
diff -u -d -r1.21 -r1.22
--- Overview.html	5 May 2010 11:36:26 -0000	1.21
+++ Overview.html	5 May 2010 15:06:17 -0000	1.22
@@ -965,7 +965,7 @@
 </pre>
 </div>
 <h4>Example 10.3</h4>
-<p>The previous web cam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. both examples use inlcude the longer text alternative in a paragraph associated with the image using <code>aria-describedby</code>. </p>
+<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. both examples use inlcude the longer text alternative in a paragraph associated with the image using <code>aria-describedby</code>. </p>
 <p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
 <div class="example">
   <p><strong>Image example in context:</strong></p>
@@ -1012,8 +1012,34 @@
   <LI><A href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5   figcaption element</A></LI>
 </ul>
 <p>&nbsp;</p>
-<h3>11. A group of images that form a single larger picture with no links</h3>
-<p><span class="note">to do</span></p>
+<h3>11. A group of images that form a single larger picture with and without links</h3>
+<p>When a picture has been sliced into smaller image files that are then displayed   together to form the complete picture again, one of the images MUST have its alt attribute set as   per the relevant rules that would be appropriate for the picture as a whole, and   then all the remaining images MUST have an empty alt attribute.</p>
+<h4>Example 11.1</h4>
+<div class="example">
+  <p>In this example, a picture representing a company logo for the <SPAN title="">PIP Corporation</SPAN> has been split into two pieces, the first containing   the letters "PIP" and the second with the word "CO". The alternative text   ("PIP CO") is all in the first image.</p>
+  <p><strong>Example Image:</strong></p>
+  <div class="element1">
+    <p><img src="images/pip.gif" alt="PIPCO" width="99" height="64" style="border:none"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></p>
+  </div>
+  <p><strong>Example code:</strong></p>
+  <pre>
+&lt;h1&gt;&lt;img src=&quot;pip.gif&quot; <strong>alt=&quot;PIP CO&quot;</strong>&gt;&lt;img src=&quot;co.gif&quot; <strong>alt=&quot;&quot;</strong>&gt;&lt;/h1&gt;
+
+</pre>
+</div>
+<h4>Example 11.1</h4>
+<div class="example">
+  <p>In this example, a picture representing a company logo for the <SPAN title="">PIP Corporation</SPAN> has been split into two pieces, the first containing   the word "PIP" and the second with the abbreviated word "CO". The alternative text   ("PIP CO") is all in the first image.</p>
+  <p><strong>Example Image:</strong></p>
+  <div class="element1">
+    <p><img src="images/pip.gif" alt="PIP CO" width="99" height="64" style="border:none"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></p>
+  </div>
+  <p><strong>Example code:</strong></p>
+  <pre>
+&lt;h1&gt;&lt;img src=&quot;pip.gif&quot; <strong>alt=&quot;PIP CO&quot;</strong>&gt;&lt;img src=&quot;co.gif&quot; <strong>alt=&quot;&quot;</strong>&gt;&lt;/h1&gt;
+
+</pre>
+</div>
 <p>&nbsp;</p>
 <h3>12. Images that are a  key part of the content</h3>
 <p><span class="note">to do</span></p>

Received on Wednesday, 5 May 2010 15:06:20 UTC