home *** CD-ROM | disk | FTP | other *** search
/ Internet Magazine 2002 August / INTERNET94.ISO / pc / software / windows / building / webmenu_studio / wmstud01.cab / _98AA8FD983A3413CAE231D96DCF342FC < prev    next >
Encoding:
Text File  |  2002-03-14  |  4.5 KB  |  107 lines
  1. =====================================================================
  2.                   WebMenu Studio Code Snippets File
  3. =====================================================================
  4.  
  5. This file is a quick reference for some of the code which you will
  6. use in the main HTML file.  For full details, please refer to the
  7. WebMenu Help file.
  8.  
  9. There are 3 main requirements for integrating WebMenu with HTML your
  10. file:
  11.  
  12.   1.  JavaScript Include statement which calls the Loader code.
  13.   2.  Resize event handler which handles any necessary behavior when
  14.       the browser window is resized.
  15.   3.  Invoking cswmShow() and cswmHide() when you want to display a
  16.       menu.
  17.  
  18. ---------------------------------------------------------------------
  19. 1. Javascript Include Statement
  20. ---------------------------------------------------------------------
  21.  
  22.    The following script tag should be placed directory after the
  23.    <BODY> tag in your document, or directly before the </BODY> tag.
  24.  
  25.      <script language="JavaScript" type="text/javascript" src="./includes/loader.js"></script>
  26.  
  27. ---------------------------------------------------------------------
  28. 2. Resize Event Handler
  29. ---------------------------------------------------------------------
  30.  
  31.    In certain situations, the DHTML code will need to carry out
  32.    instructions when the browser is resized.  This is accomplished by
  33.    invoking cswmRefresh() as a Resize event handler.  This can be
  34.    accomplished several ways:
  35.  
  36.    ------------------------------------------------------------------
  37.    Choice a.
  38.    ------------------------------------------------------------------
  39.  
  40.       Attach to OnResize event via HTML Body tag:
  41.  
  42.         <body OnResize="cswmRefresh()">
  43.  
  44.    ------------------------------------------------------------------
  45.    Choice b.
  46.    ------------------------------------------------------------------
  47.  
  48.       You can append or prefix to already existing OnResize event:
  49.  
  50.         <body OnResize="MyOtherHandler(); cswmRefresh()">
  51.  
  52.    ------------------------------------------------------------------
  53.    Choice c.
  54.    ------------------------------------------------------------------
  55.  
  56.       Attach to OnResize via script:
  57.  
  58.         window.onresize = MyResizeHandler;
  59.  
  60.         function MyResizeHandler()
  61.         {
  62.              cswmRefresh();
  63.         }
  64.  
  65. ---------------------------------------------------------------------
  66. 3. Invoking cswmShow() and cswmHide()
  67. ---------------------------------------------------------------------
  68.  
  69.    Now you can invoke the cswmShow() and cswmHide() functions as
  70.    necessary.  Menu's typically react to mouse movements or clicks in
  71.    HTML.  The following statements demonstrate several different ways
  72.    to control the placement of the menu, which react to <A> MouseOver
  73.    and MouseOut events.
  74.  
  75.     -----------------------------------------------------------------
  76.     Relative Position Below an <IMG>:
  77.     -----------------------------------------------------------------
  78.  
  79.      In this sample statement, an HTML <IMG> is used as the Button
  80.      for displaying the menu group with the ID of "File".  Note that
  81.      the <IMG> contains both and id= and name= attribute with the
  82.      same value.  This is so that the WebMenu's DHTML code can target
  83.      the <IMG> for automatic relative positioning.
  84.  
  85.        <a href="default.htm" onMouseOver="cswmShow('File', 'Button1', 'below')" onMouseOut="cswmHide()"><img id="Button1" name="Button1" src="/images/Button1.gif"></a>
  86.  
  87.     -----------------------------------------------------------------
  88.     Relative Position Below an <IMG>, with 10 px offset:
  89.     -----------------------------------------------------------------
  90.  
  91.      In this sample statement, an HTML <IMG> is used as the Button
  92.      for displaying the menu group with the ID of "File".  The menu
  93.      appears in relation to the Button, but is offset by 10 px from
  94.      the Buttons position.
  95.  
  96.        <a href="default.htm" onMouseOver="cswmShow('File', 'Button1', 'below', 10, 10)" onMouseOut="cswmHide()"><img id="Button1" name="Button1" src="/images/Button1.gif"></a>
  97.  
  98.     -----------------------------------------------------------------
  99.     Absolute Position at coordinates 50 x 50:
  100.     -----------------------------------------------------------------
  101.  
  102.       In this sample statement, a standard HREF anchor invokes the
  103.       cswmShow() function to display a menu at the specified
  104.       coordinates.
  105.  
  106.         <a href="default.htm" onMouseOver="cswmShow('File', '', 'below', 50, 50, true)" onMouseOut="cswmHide()">Link Text</a>
  107.