Home Explore Help
Sign In
lfs
/
lfs-book
2
0
Fork 0
Files Issues Pull Requests 0 Wiki
Branch: nosym
Branches Tags
lfs-book
/
stylesheets
/
lfs-xsl
/
docbook-xsl-1.78.1
/
webhelp
/
docs
/
ch02s05.html

ch02s05.html 13 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
    3. 

  3. <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    5. 

  5. <title>Adding images -  - README: Web-based Help from DocBook XML</title><meta name="generator" content="DocBook XSL Stylesheets V1.78.1"></meta><link rel="home" href="index.html" title="README: Web-based Help from DocBook XML"></link><link rel="up" href="ch02.html" title="Using the package"></link><link rel="prev" href="ch02s04.html" title="Adding support for other (non-CJKV) languages"></link><link rel="next" href="ch03.html" title="Developer Docs"></link><meta name="Section-title" content="Adding images"></meta><script type="text/javascript">
    6. 

  6.             //The id for tree cookie
    7. 

  7.             var treeCookieId = "treeview-1102";
    8. 

  8.             var language = "en";
    9. 

  9.             var w = new Object();
    10. 

  10.             //Localization
    11. 

  11.             txt_filesfound = 'Results';
    12. 

  12.             txt_enter_at_least_1_char = "You must enter at least one character.";
    13. 

  13.             txt_browser_not_supported = "JavaScript is disabled on your browser. Please enable JavaScript to enjoy all the features of this site.";
    14. 

  14.             txt_please_wait = "Please wait. Search in progress...";
    15. 

  15.             txt_results_for = "Results for: ";
    16. 

  16.         </script><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></link><link rel="stylesheet" type="text/css" href="common/css/positioning.css"></link><link rel="stylesheet" type="text/css" href="common/jquery/theme-redmond/jquery-ui-1.8.2.custom.css"></link><link rel="stylesheet" type="text/css" href="common/jquery/treeview/jquery.treeview.css"></link><style type="text/css">
    17. 

  17. 

  18. #noscript{
    19. 

  19.     font-weight:bold;
    20. 

  20. 	background-color: #55AA55;
    21. 

  21.     font-weight: bold;
    22. 

  22.     height: 25spx;
    23. 

  23.     z-index: 3000;
    24. 

  24. 	top:0px;
    25. 

  25. 	width:100%;
    26. 

  26. 	position: relative;
    27. 

  27. 	border-bottom: solid 5px black;
    28. 

  28. 	text-align:center;
    29. 

  29. 	color: white;
    30. 

  30. }
    31. 

  31. 

  32. input {
    33. 

  33.     margin-bottom: 5px;
    34. 

  34.     margin-top: 2px;
    35. 

  35. }
    36. 

  36. .folder {
    37. 

  37.     display: block;
    38. 

  38.     height: 22px;
    39. 

  39.     padding-left: 20px;
    40. 

  40.     background: transparent url(common/jquery/treeview/images/folder.gif) 0 0px no-repeat;
    41. 

  41. }
    42. 

  42. span.contentsTab {
    43. 

  43.     padding-left: 20px;
    44. 

  44.     background: url(common/images/toc-icon.png) no-repeat 0 center;
    45. 

  45. }
    46. 

  46. span.searchTab {
    47. 

  47.     padding-left: 20px;
    48. 

  48.     background: url(common/images/search-icon.png) no-repeat 0 center;
    49. 

  49. }
    50. 

  50. 

  51. /* Overide jquery treeview's defaults for ul. */
    52. 

  52. .treeview ul {
    53. 

  53.     background-color: transparent;
    54. 

  54.     margin-top: 4px;
    55. 

  55. }		
    56. 

  56. #webhelp-currentid {
    57. 

  57.     background-color: #D8D8D8 !important;
    58. 

  58. }
    59. 

  59. .treeview .hover { color: black; }
    60. 

  60. .filetree li span a { text-decoration: none; font-size: 12px; color: #517291; }
    61. 

  61. 

  62. /* Override jquery-ui's default css customizations. These are supposed to take precedence over those.*/
    63. 

  63. .ui-widget-content {
    64. 

  64.     border: 0px; 
    65. 

  65.     background: none; 
    66. 

  66.     color: none;     
    67. 

  67. }
    68. 

  68. .ui-widget-header {
    69. 

  69.     color: #e9e8e9;
    70. 

  70.     border-left: 1px solid #e5e5e5;
    71. 

  71.     border-right: 1px solid #e5e5e5;
    72. 

  72.     border-bottom: 1px solid #bbc4c5;
    73. 

  73.     border-top: 4px solid #e5e5e5;
    74. 

  74.     border: medium none;
    75. 

  75.     background: #F4F4F4; /* old browsers */
    76. 

  76.     background: -moz-linear-gradient(top, #F4F4F4 0%, #E6E4E5 100%); /* firefox */
    77. 

  77.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E6E4E5)); /* webkit */    
    78. 

  78.     font-weight: none;
    79. 

  79. }
    80. 

  80. .ui-widget-header a { color: none; }
    81. 

  81. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    82. 

  82. border: none; background: none; font-weight: none; color: none; }
    83. 

  83. .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: black; text-decoration: none; }
    84. 

  84. .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none; background: none; font-weight: none; color: none; }
    85. 

  85. 

  86. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none; background: none; font-weight: none; color: none; }
    87. 

  87. .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { 
    88. 

  88.     color: black; text-decoration: none; 	
    89. 

  89.     background: #C6C6C6; /* old browsers */
    90. 

  90.     background: -moz-linear-gradient(top, #C6C6C6 0%, #D8D8D8 100%); /* firefox */
    91. 

  91.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C6C6C6), color-stop(100%,#D8D8D8)); /* webkit */
    92. 

  92.     -webkit-border-radius:15px; -moz-border-radius:10px;
    93. 

  93.     border: 1px solid #f1f1f1;
    94. 

  94. }    
    95. 

  95. .ui-corner-all { border-radius: 0 0 0 0; }
    96. 

  96. 

  97. .ui-tabs { padding: .2em;}
    98. 

  98. .ui-tabs .ui-tabs-nav li { top: 0px; margin: -2px 0 1px; text-transform: uppercase; font-size: 10.5px;}
    99. 

  99. .ui-tabs .ui-tabs-nav li a { padding: .25em 2em .25em 1em; margin: .5em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
    100. 

  100.        /**
    101. 

  101. 	 *	Basic Layout Theme
    102. 

  102. 	 * 
    103. 

  103. 	 *	This theme uses the default layout class-names for all classes
    104. 

  104. 	 *	Add any 'custom class-names', from options: paneClass, resizerClass, togglerClass
    105. 

  105. 	 */
    106. 

  106. 

  107. 	.ui-layout-pane { /* all 'panes' */ 
    108. 

  108. 		background: #FFF; 
    109. 

  109. 		border: 1px solid #BBB; 
    110. 

  110. 		padding: 05x; 
    111. 

  111. 		overflow: auto;
    112. 

  112. 	} 
    113. 

  113.         
    114. 

  114. 	.ui-layout-resizer { /* all 'resizer-bars' */ 
    115. 

  115. 		background: #DDD; 
    116. 

  116.                 top:100px
    117. 

  117. 	} 
    118. 

  118. 

  119. 	.ui-layout-toggler { /* all 'toggler-buttons' */ 
    120. 

  120. 		background: #AAA; 
    121. 

  121. 	} 
    122. 

  122.     
    123. 

  123.        </style><!--[if IE]>
    124. 

  124. 	<link rel="stylesheet" type="text/css" href="../common/css/ie.css"/>
    125. 

  125. 	<![endif]--><script type="text/javascript" src="common/browserDetect.js"></script><script type="text/javascript" src="common/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="common/jquery/jquery.ui.all.js"></script><script type="text/javascript" src="common/jquery/jquery.cookie.js"></script><script type="text/javascript" src="common/jquery/treeview/jquery.treeview.min.js"></script><script type="text/javascript" src="common/jquery/layout/jquery.layout.js"></script><script type="text/javascript" src="search/l10n.js"></script><script type="text/javascript" src="search/htmlFileInfoList.js"></script><script type="text/javascript" src="search/nwSearchFnt.js"></script><script type="text/javascript" src="search/stemmers/en_stemmer.js"><!--//make this scalable to other languages as well.--></script><script type="text/javascript" src="search/index-1.js"></script><script type="text/javascript" src="search/index-2.js"></script><script type="text/javascript" src="search/index-3.js"></script></head><body><noscript><div id="noscript">JavaScript is disabled on your browser. Please enable JavaScript to enjoy all the features of this site.</div></noscript><div id="header"><a href="index.html"><img style="margin-right: 2px; height: 59px; padding-right: 25px; padding-top: 8px" align="right" src="common/images/logo.png" alt=" Documentation"></img></a><h1>README: Web-based Help from DocBook XML<br></br>Using the package</h1><div id="navheader"><table class="navLinks"><tr><td><a id="showHideButton" href="#" onclick="myLayout.toggle('west')" class="pointLeft" tabindex="5" title="Hide TOC tree">Sidebar
    126. 

  126.                             </a></td><td><a accesskey="p" class="navLinkPrevious" tabindex="5" href="ch02s04.html">Prev</a>
    127. 

  127.                                         |
    128. 

  128.                                         <a accesskey="u" class="navLinkUp" tabindex="5" href="ch02.html">Up</a>
    129. 

  129.                                     |
    130. 

  130.                                     <a accesskey="n" class="navLinkNext" tabindex="5" href="ch03.html">Next</a></td></tr></table></div></div><div id="content"><div class="section"><div xmlns="" class="titlepage"><div><div><h2 xmlns="http://www.w3.org/1999/xhtml" class="title" style="clear: both"><a id="idp253024"></a>Adding images</h2></div></div></div>
    131. 

  131. <p>This section shows how to add images to WebHelp. For that, follow the simple procedure given.</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>Put the images in a subdirectory of your source file directory. For example
    132. 

  132.                 <code class="filename">docsrc/images</code>.</p></li><li class="listitem"><p>Then refer to those images from your docbook document.</p><p>Following image is from <span class="bold"><strong>webhelp/docsrs/images/sample.jpg</strong></span>. The docbook code is shown
    133. 

  133.               below.</p><p>
    134. 

  134.               </p><div class="figure"><a id="idp258048"></a><p class="title"><strong>Figure 1. Sample Image</strong></p><div class="figure-contents"><div class="mediaobject"><img src="images/sample.jpg" alt="Sample Image"></img></div></div></div><p><br class="figure-break"></br>
    135. 

  135.             </p><div class="example"><a id="idp260752"></a><p class="title"><strong>Example 1. Example code for adding images. Note down the relative path used</strong></p><div class="example-contents"><pre class="programlisting">&lt;figure&gt;
    136. 

  136.   &lt;title&gt;Sample&lt;/title&gt;
    137. 

  137.   &lt;mediaobject&gt;
    138. 

  138.     &lt;imageobject&gt;
    139. 

  139.       &lt;imagedata fileref="<span class="bold"><strong>images/sample.jpg</strong></span>" format="JPG"/&gt;
    140. 

  140.     &lt;/imageobject&gt;
    141. 

  141.   &lt;/mediaobject&gt;
    142. 

  142. &lt;/figure&gt;</pre></div></div><br class="example-break"></br></li><li class="listitem"><p> The <code class="filename">build.properties</code> file controls what directories are copied
    143. 

  143.               over from the source tree to the output
    144. 

  144.               tree:</p><pre class="programlisting"># If your document has image directories that need to be copied
    145. 

  145. # to the output directory, you can list patterns here. 
    146. 

  146. # See the Ant documentation for fileset for documentation
    147. 

  147. # on patterns.
    148. 

  148. input-images-dirs=images/**,figures/**,graphics/**</pre></li></ul></div></div><script type="text/javascript" src="common/main.js"></script><script type="text/javascript" src="common/splitterInit.js"></script><div class="navfooter"><hr></hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch02s04.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch02.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch03.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></div><div id="sidebar"><div id="leftnavigation" style="padding-top:3px;"><div id="tabs"><ul><li><a href="#treeDiv" style="outline:0;" tabindex="1"><span class="contentsTab">Contents</span></a></li><li><a href="#searchDiv" style="outline:0;" tabindex="1" onclick="doSearch()"><span class="searchTab">Search</span></a></li></ul><div id="treeDiv"><img src="common/images/loading.gif" alt="loading table of contents..." id="tocLoading" style="display:block;"></img><div id="ulTreeDiv" style="display:none"><ul id="tree" class="filetree"><li><span class="file"><a href="ch01.html" tabindex="1">Introduction</a></span></li><li><span class="file"><a href="ch02.html" tabindex="1">Using the package</a></span><ul><li><span class="file"><a href="ch02s01.html" tabindex="1">Generating webhelp output using the Ant build.xml
    149. 

  149.         file</a></span></li><li><span class="file"><a href="ch02s02.html" tabindex="1">Using and customizing the output</a></span><ul><li><span class="file"><a href="ch02s02s01.html" tabindex="1">Recommended Apache configurations</a></span></li></ul></li><li><span class="file"><a href="ch02s03.html" tabindex="1">Search indexing</a></span></li><li><span class="file"><a href="ch02s04.html" tabindex="1">Adding support for other (non-CJKV) languages</a></span></li><li id="webhelp-currentid"><span class="file"><a href="ch02s05.html" tabindex="1">Adding images</a></span></li></ul></li><li><span class="file"><a href="ch03.html" tabindex="1">Developer Docs</a></span><ul><li><span class="file"><a href="ch03s01.html" tabindex="1">Design</a></span></li><li><span class="file"><a href="ch03s02.html" tabindex="1">Search</a></span><ul><li><span class="file"><a href="ch03s02s01.html" tabindex="1">New Stemmers</a></span></li></ul></li></ul></li><li><span class="file"><a href="ch04.html" tabindex="1">FAQ</a></span></li><li><span class="file"><a href="ch05.html" tabindex="1">Test section</a></span><ul><li><span class="file"><a href="ch05s01.html" tabindex="1">Some search words for testing</a></span></li><li><span class="file"><a href="ch05s02.html" tabindex="1">Some search words for testing (inflected)</a></span></li></ul></li><li><span class="file"><a href="ix01.html" tabindex="1">Index</a></span></li></ul></div></div><div id="searchDiv"><div id="search"><form onsubmit="Verifie(searchForm);return false" name="searchForm" class="searchForm"><div><input id="textToSearch" name="textToSearch" type="search" placeholder="Search" class="searchText" tabindex="1"></input> &nbsp; <input onclick="Verifie(searchForm)" type="button" class="searchButton" value="Go" id="doSearch" tabindex="1"></input></div></form></div><div id="searchResults"><center></center></div><p class="searchHighlight"><a href="#" onclick="toggleHighlight()">Search Highlighter (On/Off)</a></p></div></div></div></div></body></html>
    150.