home *** CD-ROM | disk | FTP | other *** search
/ GameStar 2005 May / Gamestar_73_2005-05_dvd.iso / Programy / amaya / amaya-WinXP-9.1.exe / doc / WX / ImageMaps.html < prev    next >
Encoding:
Extensible Markup Language  |  2005-02-23  |  5.1 KB  |  136 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.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <title>Using Image Maps</title>
  8.   <style type="text/css">
  9.  
  10.  
  11.   </style>
  12.   <link href="style.css" rel="stylesheet" type="text/css" />
  13. </head>
  14.  
  15. <body xml:lang="en" lang="en">
  16.  
  17. <div>
  18. <img alt="Amaya" src="../../resources/icons/22x22/logo.png" class="logo" />
  19.  
  20. <p class="nav"><a href="Tables.html" accesskey="p"><img alt="previous"
  21. src="../../resources/icons/misc/left.png" /></a> <a href="Manual.html"
  22. accesskey="t"><img alt="top" src="../../resources/icons/misc/up.png" /></a>
  23. <a href="Math.html" accesskey="n"><img alt="next"
  24. src="../../resources/icons/misc/right.png" /></a></p>
  25. </div>
  26.  
  27. <div class="toc">
  28. <ul>
  29.   <li><a href="#Using">Using Image and Maps</a>
  30.     <ul>
  31.       <li><a href="#Adding">Adding an Image</a></li>
  32.       <li><a href="#Replacing">Replacing an Image</a></li>
  33.       <li><a href="#About">About Alternative Text and Long
  34.       Descriptions</a></li>
  35.       <li><a href="#Using1">Using client-side image maps</a></li>
  36.     </ul>
  37.   </li>
  38. </ul>
  39. </div>
  40.  
  41. <div id="page_body">
  42. <h2 id="Using">Using Image and Maps</h2>
  43.  
  44. <h3 id="Adding">Adding an Image</h3>
  45.  
  46. <p>To <em>insert</em> an image, choose <strong>Image</strong> from the
  47. <strong>XHTML</strong> menu, click the <strong>Image</strong> <img
  48. src="../../resources/icons/22x22/XHTML_Image.png" alt="Image button" />
  49. button, or use the keyboard shortcut (<code>Ctrl h</code> <code>Ctrl
  50. i</code>). The resulting dialog lets you enter the file name and alternative
  51. text (<strong>Alt</strong> attribute) of the desired image.</p>
  52.  
  53. <p class="Note"><strong>Note</strong>: the alternative text is mandatory. You
  54. must provide some text in the corresponding field.</p>
  55.  
  56. <p>To help find an image file you can enter a filter field, and use the
  57. filter button, and the dialog will list only the files that match your
  58. pattern.</p>
  59.  
  60. <p>To provide a long description for an image presenting complex information,
  61. you should do so in a separate document and link it by giving the URI as a
  62. <strong>longdesc</strong>. This command is also available on the
  63. <strong>Attributes</strong> list.</p>
  64.  
  65. <h3 id="Replacing">Replacing an Image</h3>
  66.  
  67. <p>If an image is selected (do so by dragging over the image) when opening
  68. the image dialog, the selected image is then <em>replaced</em> by the new
  69. image.</p>
  70.  
  71. <h3 id="About">About Alternative Text and Long Descriptions</h3>
  72.  
  73. <p>Without useful alternative text for images, many web pages become
  74. difficult or even impossible to navigate, and users are left "feeling their
  75. way in the dark."</p>
  76.  
  77. <p>To prevent this problem, you must provide alternative text for elements
  78. such as images and other multimedia objects. The alternative text is usually
  79. presented instead of the image by a browser with a voice output system, or on
  80. a Braille display used by many people who are blind.áIt is also common for
  81. users with low-quality connections to request the alternate view, because
  82. text is transmitted much faster than images.</p>
  83.  
  84. <p>The alternative text should replace the image in function as well. For
  85. example, if you use the image as an icon that links to a reference point,
  86. then the title of the reference itself is a good alternative text.</p>
  87.  
  88. <p>There are cases where an image is used for purely visual effect, and does
  89. not add any information value to the page. In this case, it is appropriate to
  90. use a blank alternative text, although you must still define it.</p>
  91.  
  92. <p>When the image conveys important information that is not available from
  93. the text of the document, you must provide a description of the information.
  94. The <code>longdesc</code> option in the <strong>Attributes</strong> list
  95. enables you to link a description to the image. This description can be a URI
  96. (a separate document), or named part of the current document.</p>
  97.  
  98. <p>To view how a page might be presented without the images, use Show
  99. Alternate (<span class="Link0"><strong>Views >Show
  100. Alternate</strong></span>). If the page is spoken by a voice output system,
  101. then the alternate view might simply be read out.</p>
  102.  
  103. <h3 id="Using1">Using client-side image maps</h3>
  104.  
  105. <p>Amaya enables you to use client-side image maps.</p>
  106.  
  107. <p class="ProcedureCaption">To activate an area in an image map</p>
  108. <ul>
  109.   <li>Double-click on the area within the image. Amaya finds the URI
  110.     associated to this area, and opens it in the browser.</li>
  111. </ul>
  112.  
  113. <p class="ProcedureCaption">To display the existing areas within an image
  114. map</p>
  115. <ul>
  116.   <li>Select <strong>Show Map Areas</strong> from the <strong>Views</strong>
  117.     menu.<br />
  118.  
  119.     <p class="Note"><strong>Note:</strong>áá You can also display existing
  120.     areas directly from the keyboard by clicking <code>Ctrl v
  121.     Ctrl</code><code>t</code> (<code>Ctrl u Ctrl t</code> on Windows
  122.     platforms).</p>
  123.   </li>
  124. </ul>
  125.  
  126. <p></p>
  127.  
  128. <p></p>
  129.  
  130. <p></p>
  131.  
  132. <p></p>
  133. </div>
  134. </body>
  135. </html>
  136.