home *** CD-ROM | disk | FTP | other *** search
/ Internet Magazine 2002 August / INTERNET94.ISO / pc / software / windows / building / webmenu_studio / wmstud01.cab / _881FC5D851884476A4152D2D4C6E96CC < prev    next >
Encoding:
Text File  |  2002-03-14  |  4.3 KB  |  72 lines
  1. <html>
  2. <head>
  3.     <title>COALESYS, Inc.</title>
  4. </head>
  5.  
  6. <body onResize="cswmRefresh()" scroll="auto" link="yellow" alink="yellow" vlink="yellow" bgcolor="#606060" leftmargin=0 topmargin=0 marginheight=0 marginwidth=0>
  7.  
  8. <script language="JavaScript" type="text/javascript" src="./includes/loader.js"></script>
  9.  
  10. <!-- Main Nav -->
  11. <table bgcolor="#000000" width="100%" align="center" border=0 cellpadding=0 cellspacing=0>
  12.     <tr>
  13.         <td width="50%"><img src="./images/clearpixel.gif" width=1 height=1 alt="" border=0></td>
  14.         <td width=50><a onmouseover="cswmShow('File', 'file', 'below', 0, 2)" onmouseout="cswmHide()" href="default.htm"><img id="file" name="file" src="./images/file.gif" width=50 height=26 alt="" border=0></a></td>
  15.         <td width=50><a onmouseover="cswmShow('Edit', 'edit', 'below', 0, 2)" onmouseout="cswmHide()" href="default.htm"><img id="edit" name="edit" src="./images/edit.gif" width=50 height=26 alt="" border=0></a></td>
  16.         <td width="50%"><img src="./images/clearpixel.gif" width=1 height=1 alt="" border=0></td>
  17.     </tr>
  18.     <tr>
  19.         <td width="100%" height=2 colspan=4 bgcolor="#66f088"><img src="./images/clearpixel.gif" width=1 height=1 alt="" border=0></td>
  20.     </tr>
  21. </table>
  22. <!-- End Main Nav -->
  23. <br>
  24. <br>
  25. <table width="100%" border=0 cellpadding=5 cellspacing=5>
  26.     <tr>
  27.         <td colspan=2>
  28.             <p><b><font color="white">About the Sample:</b></td>
  29.     </tr>
  30.     <tr>
  31.         <td width=10></td>
  32.         <td><font color="white">
  33.             <p>
  34.                 This sample demonstrates how the appearance of the menu can be customized with graphics, and how those graphics can contain transparent regions.
  35.             <p>
  36.                 The graphics with the rounded corners are placed by creating an <b>Item</b> and setting it's <b>Style</b> property to 1 (Divider).  Normally, dividers are simple colored lines and are placed between Items.  In this case, the Divider has been placed at the beginning or end of the <b>Items</b> collection and the <b>DividerImage</b> property has been set so that it maps to our rounded corner graphic.
  37.             <p>
  38.                 This also has the effect of enforcing a minimum width on the rest of the menu because each group cannot be smaller than it's largest Item, in this case, the <b>DividerImage</b>.  If you wanted to set a minimum width on a group, but not show a graphic, then you could use a transparent GIF file that is the desired width.
  39.             <p>
  40.                 Each of the Items which contain hyperlinks have had their <b>BackgroundImage</b> property set to a 1px high gradient graphic which tiles behind the <b>Caption</b>.  The <b>BackgroundImage</b> on the <b>Group</b> object could not be used in this case because it would show through in the rounded corner graphic transparent areas.
  41.             <p>
  42.                 For positioning, the menu makes use of the offset feature.  If the menu appeared in it's automatic location, just below the "File" or "Edit" tabs, it would cover a portion of the green line going across the page.  Instead the menus are offset 2 pixels down using a parameter of the client-side <b>cswmShow()</b> function.
  43.             <p>
  44.                 This sample also contains a demonstration of disabling an Item.  The "Paste" Item in the "Edit" Group has had it's <b>Enabled</b> property set to false.  This nullifies any action associated with the Item without requiring you to make any other changes to it's properties.  All disabled Items have their text color set by the <b>DisabledTextColor</b> property on the Main object.
  45.             <p>
  46.                 Finally, there is also a demonstration of using the <b>SelectedColor</b> override on a Group object.  The "Open" nested Group in the "File" Group has had it's <b>SelectedColor</b> property set to "yellow".
  47.         </td>
  48.     </tr>
  49.     <tr>
  50.         <td colspan=2>
  51.             <p><b><font color="white">View the Code:</b></td>
  52.     </tr>
  53.     <tr>
  54.         <td width=10></td>
  55.         <td><font color="white">
  56.             <p>
  57.                 The code for this sample is available in the product installation directory:
  58.                 <ul>
  59.                     <li><b>CustomImages.wms</b> - The WebMenu Studio project file.
  60.                     <li><b>CustomImages.wmt</b> - The Preview template used by the Studio's Live Preview window.
  61.                     <li><b>default.htm (this file)</b> - Uses the WebMenu compiled output and discusses the sample.
  62.                     <li><b>./includes/*</b> - The WebMenu output compiled from the studio application.
  63.                     <li><b>./images/*</b> - The images used in this sample.
  64.                 </ul>
  65.  
  66.         </td>
  67.     </tr>
  68. </table>
  69.  
  70. </body>
  71. </html>
  72.