home *** CD-ROM | disk | FTP | other *** search
/ PC World 2001 April / PCWorld_2001-04_cd.bin / Komunik / Amaya / WinNT2000 / amaya-WindowsNT-4.3.exe / _SETUP.1 / ImageMaps.html < prev    next >
Encoding:
Extensible Markup Language  |  2001-02-22  |  6.9 KB  |  152 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.   <title>Images and Client-side image maps</title>
  7.   <meta name="GENERATOR" content="amaya V4.2.2" />
  8.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9. </head>
  10.  
  11. <body xml:lang="en" lang="en">
  12.  
  13. <table border="0" width="100%" summary="toc">
  14.   <tbody>
  15.     <tr>
  16.       <td><p><img border="0" alt="W3C" src="../../Icons/WWW/w3c_home" /> <img
  17.         border="0" alt="Amaya" src="../Icons/amaya.gif" /></p>
  18.       </td>
  19.       <td><p align="right"><a href="SVG.html" accesskey="p"><img
  20.         alt="previous" border="0" src="../Icons/left.gif" /></a> <a
  21.         href="Manual.html" accesskey="t"><img alt="top" border="0"
  22.         src="../Icons/up.gif" /></a> <a href="StyleSheets.html"
  23.         accesskey="n"><img alt="next" border="0" src="../Icons/right.gif"
  24.         /></a></p>
  25.       </td>
  26.     </tr>
  27.   </tbody>
  28. </table>
  29.  
  30. <div id="Client-sid">
  31. <h2><a name="L1013">Images and Client-side image maps</a></h2>
  32.  
  33. <h3><a name="Adding">Adding an image</a></h3>
  34.  
  35. <p>To insert an image choose <strong>Image</strong> from the
  36. <strong>Types</strong> menu or click on the <img alt="Image " border="0"
  37. src="../Icons/Image.gif" align="middle" longdesc="longdesc.htm" /> button (or
  38. use the keyboard shortcut control-t, control-i in Unix). This brings up a
  39. dialog box that lets you enter the file name and <a
  40. href="#Alternative">alternative text</a> ('ALT' text) of the desired image. If
  41. you wish to provide a long description (for example if your image presents
  42. complex information) you should do so in a separate document and link it by
  43. giving the URI as a <strong>longdesc</strong>, also available in the
  44. <strong>Attributes</strong> menu. To help find an image file you can enter a
  45. <strong>filter</strong> field, and use the <strong>filter</strong> button, so
  46. the dialog will list only the files which match your pattern.</p>
  47.  
  48. <h3><a name="Alternative">Alternative Text and Long Descriptions</a></h3>
  49.  
  50. <p>For elements such as images (and other multimedia objects) you must provide
  51. alternative text. This will usually be presented instead of the image by a
  52. browser with a voice output system, or a Braille display (used by many people
  53. who are blind). It is also common for users with low-quality connections to
  54. request the alternate view, where text is transmitted much faster than
  55. images.</p>
  56.  
  57. <p>The alternative text should replace the image in function. For example, if
  58. the image is used to provide an icon linking to a reference point (the first
  59. link on this page, to the W3C 'homepage', is such a link) then the title of
  60. the reference would be a good alternative text.</p>
  61.  
  62. <p>There are also cases where an image is used for purely visual effect, and
  63. does not add any information value to the page. In this case it is appropriate
  64. to use a blank alternative, although that must still be defined - enter two
  65. double quotes for alternative (eg. alt="").</p>
  66.  
  67. <p>In cases where the image conveys important information which is not
  68. available from the text of the document you must also provide a description of
  69. the information. The <strong>longdesc</strong> option of the
  70. <strong>Attributes</strong> menu allows you to link a description (which is a
  71. URI - a separate document, or named part of the current document) to the
  72. image.</p>
  73.  
  74. <p>In order to give an idea of how a page might be presented without the
  75. images, Amaya provides a <strong>Show Alternate</strong> option in the
  76. <strong>Views</strong> menu. If the page were spoken, then the <a
  77. href="Views.html#Alternate">alternate view</a> might simply be read out.
  78. Without useful alternative text for images, many pages become difficult or
  79. impossible to navigate, and users are left 'feeling their way in the
  80. dark'.</p>
  81.  
  82. <h3><a name="Using">Using client-side image maps</a></h3>
  83.  
  84. <p><strong>Amaya</strong> allows you to use client-side image maps:</p>
  85. <ul>
  86.   <li>To activate an area in a map, double-click on the area with the left
  87.     mouse button. The URI attached to this area is then fetched.</li>
  88.   <li>To display existing areas, choose <strong>Show Map Areas</strong> from
  89.     the <strong>Views</strong> menu.</li>
  90. </ul>
  91.  
  92. <h3><a name="Creating">Creating client-side image maps</a></h3>
  93.  
  94. <p>To create a new image map, you insert an image into the document, and
  95. define areas as links.</p>
  96.  
  97. <p>To create an area in a image, select the image or an existing area of that
  98. image. Then choose <strong>Rectangle</strong>, <strong>Circle</strong>,
  99. <strong>Polygon</strong> from the <strong>Area Map</strong> submenu of the
  100. <strong>Types</strong> menu, depending on the shape of the new area you want
  101. to create. The <strong>Show map areas</strong> option in the
  102. <strong>Views</strong> menu will outline each of the existing map areas on an
  103. image.</p>
  104. <ul>
  105.   <li>To create a rectangular or circular area, you must first select the
  106.     position of one corner by pressing the left mouse button. Keep the button
  107.     pressed down and move to the position of the opposite corner, then release
  108.     the button. The area is now defined.</li>
  109.   <li>For a Polygon, enter each point by clicking the corresponding position
  110.     with the left mouse button. To indicate the last point, click with the
  111.     middle button.</li>
  112. </ul>
  113.  
  114. <p>When the area has been defined, you must first provide <a
  115. href="#Alternative">alternative text</a> in the dialogue provided and then
  116. enter the target of the link associated with that area. Just select the target
  117. (or enter its URI if it is not displayed), in the same way as you <a
  118. href="Links.html#L245">create links</a>.</p>
  119.  
  120. <h3><a name="L11711">Moving image map areas</a></h3>
  121.  
  122. <p>When the area has been defined, you can move this area:</p>
  123. <ul>
  124.   <li><p>By direct manipulation - combining the <strong>Control key</strong>
  125.     with the <strong>Left button</strong> of the mouse within an area of image
  126.     map allows you to move this area.</p>
  127.   </li>
  128.   <li><p>By editing the <strong>coords</strong> attribute of the area in the
  129.     Structure View.</p>
  130.   </li>
  131. </ul>
  132.  
  133. <h3><a name="L1171">Resizing image map areas</a></h3>
  134. <ul>
  135.   <li>By direct manipulation - combining the <strong>Control key</strong> with
  136.     the <strong>Middle</strong> or the <strong>Right button</strong> of the
  137.     mouse within an area of image map allows you to resize this area.</li>
  138.   <li>By editing the <strong>coords</strong> attribute of the area in the
  139.     Structure View. 
  140.     <p></p>
  141.   </li>
  142. </ul>
  143. </div>
  144.  
  145. <p align="right"><a href="SVG.html"><img alt="previous" border="0"
  146. src="../Icons/left.gif" /></a> <a href="Manual.html"><img alt="top" border="0"
  147. src="../Icons/up.gif" /></a> <a href="StyleSheets.html"><img alt="next"
  148. border="0" src="../Icons/right.gif" /></a></p>
  149. <hr />
  150. </body>
  151. </html>
  152.