home *** CD-ROM | disk | FTP | other *** search
/ Internet Magazine 2002 August / INTERNET94.ISO / pc / software / windows / building / webmenu_studio / wmstud01.cab / _C9792316AA564EAB98D53FF491CB7532 < prev    next >
Encoding:
Text File  |  2002-03-14  |  4.5 KB  |  85 lines
  1. <html>
  2. <head>
  3.     <title>COALESYS, Inc.</title>
  4.  
  5.     <script language="JavaScript" type="text/javascript">
  6.     <!--
  7.     // preload ButtonOn Images to improve initial swap time
  8.     var aButtons = new Array();
  9.     aButtons[0] = new Image();
  10.     aButtons[0].src = "./images/FileButtonOn.gif";
  11.     aButtons[1] = new Image();
  12.     aButtons[1].src = "./images/EditButtonOn.gif";
  13.  
  14.     // SwapButton is called from the WebMenu OnShow and OnHide events
  15.     // state is "on" or "off" and id is the WM.Group ID property
  16.     function SwapButton(id, state)
  17.     {
  18.         if(state == "on")
  19.             eval("document." + id + "Button.src='./images/" + id + "ButtonOn.gif'");
  20.         else if(state == "off")
  21.             eval("document." + id + "Button.src='./images/" + id + "Button.gif'");
  22.     }
  23.     //-->
  24.     </script>
  25. </head>
  26.  
  27. <body onResize="cswmRefresh()" scroll="auto" link="red" alink="red" vlink="red" bgcolor="#ffffff" leftmargin=10 topmargin=10 marginheight=10 marginwidth=10>
  28.  
  29. <script language="JavaScript" type="text/javascript" src="./includes/loader.js"></script>
  30.  
  31. <!-- Main Nav -->
  32. <table cellspacing=0 cellpadding=0 border=0 width="100%" bgcolor="#dbd7d0" height=18 style="cursor:default">
  33.     <tr>
  34.         <td width=20><img src="./images/clearpixel.gif" width=20></td>
  35.         <td width=36><a onmouseover="cswmShow('File', 'FileButton', 'below')" onmouseout="cswmHide()" href="default.htm"><img id="FileButton" name="FileButton" src="./images/FileButton.gif" width=36 height=18 alt="" border=0></a></td>
  36.         <td width=38><a onmouseover="cswmShow('Edit', 'EditButton', 'below')" onmouseout="cswmHide()" href="default.htm"><img id="EditButton" name="EditButton" src="./images/EditButton.gif" width=38 height=18 alt="" border=0></a></td>
  37.         <td width="100%"><img src="./images/clearpixel.gif"></td>
  38.     </tr>
  39. </table>
  40.  
  41. <!-- End Main Nav -->
  42. <br>
  43. <table width="100%" border=0 cellpadding=5 cellspacing=5>
  44.     <tr>
  45.         <td colspan=2>
  46.             <p><b>About the Sample:</b></td>
  47.     </tr>
  48.     <tr>
  49.         <td width=10></td>
  50.         <td>
  51.             <p>
  52.                 This menu is inspired by the menus found in various Microsoft releases.  It's not an exact duplication, but serves as a good demonstration how backgrounds and dividers can be customized with graphics.  It also shows the <b>ShadowEnabled</b> feature which is veiwed in IE 5 and greater running on Windows.
  53.             <p>
  54.                 It uses the <b>WebMenu.BackgroundImage</b> property to create a tiling background which displays the dark and light colors of the menu.  In order to make the background image visible, the <b>WebMenu.BackgroundColor</b> needs to be set to an empty string.
  55.             <p>
  56.                 Each Item contains a 16px <b>IconImage</b>, either a graphic or a blank (transparent) gif.  The blank gif is necessary to force all of the <b>Item.Captions</b> to line up.  Although not demonstrated in this sample, it is also possible to set the <b>SelectedIconImage</b> property so that the icon will change appearance when the mouse is positioned over an Item.
  57.             <p>
  58.                 To create the dividers, the <b>DividerImage</b>, <b>DividerColor</b> and <b>DividerImageAlignment</b> properties were used.  The <b>DividerImage</b> is a short graphic, aligned to the left, which constitutes the dark and light transition between the dark colored icon space and the light colored padding area before the Caption begins.  The <b>DividerColor</b> is set to the same color as the icon space, which appears through the remainder of the menu's width.  An optional approach would be to create a long 1px high image representing the entire divider and then setting the <b>DividerBackgroundImage</b> property.  In that case, the <b>DividerBackgroundColor</b> must be set to an empty string.
  59.             <p>
  60.                 This sample also demonstrates the use of the <b>WebMenu.OnShow</b> and <b>WebMenu.OnHide</b> events.  Each is used to call a custom client-side function (SwapButton) which changes the images of the menu button associated with the menu that is displayed.
  61.         </td>
  62.     </tr>
  63.     <tr>
  64.         <td colspan=2>
  65.             <p><b>View the Code:</b></td>
  66.     </tr>
  67.     <tr>
  68.         <td width=10></td>
  69.         <td>
  70.             <p>
  71.                 The code for this sample is available in the product installation directory:
  72.                 <ul>
  73.                     <li><b>netmenu.wms</b> - The WebMenu Studio project file.
  74.                     <li><b>netmenu.wmt</b> - The Preview template used by the Studio's Live Preview window.
  75.                     <li><b>default.htm (this file)</b> - Uses the WebMenu compiled output and discusses the sample.
  76.                     <li><b>./includes/*</b> - The WebMenu output compiled from the studio application.
  77.                     <li><b>./images/*</b> - The images used in this sample.
  78.                 </ul>
  79.         </td>
  80.     </tr>
  81. </table>
  82.  
  83. </body>
  84. </html>
  85.