Frames Example Page 2
 
So far, each page, except for the last, has set up with the same exact same set of menus. It's now just a question of how to manipulate them from the left-hand frame.

Code for the Left-Hand Frame

The page for the left-hand frame first runs some script code to set up capturing of the onmouseover event for the frame. This will allow the mouse position to be used in positioning the menus in this frame.

The code is pretty straight-forward and simply updates two global variables called mouseX and mouseY with the current mouse coordinates whenever it is moved over the frame.

  //---------------------------------------------------------------------------
  // Code for tracking the mouse position.
  //---------------------------------------------------------------------------

  // These variables will hold the current mouse pointer position.

  var mouseX = 0;
  var mouseY = 0;

  // Set up event capturing.

  if (isMinNS4)
    document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = getMousePosition;

  function getMousePosition(e) {

    // Save mouse pointer position.

    if (isMinNS4) {
      mouseX = e.pageX;
      mouseY = e.pageY;
    }
    if (isMinIE4) {
      mouseX = window.event.clientX + document.body.scrollLeft;
      mouseY = window.event.clientY + document.body.scrollTop;
    }

    if (isMinNS4)
      return routeEvent(e);
  }

If you look a the HTML code for the menu links at left, you'll see that each has an onmouseover event set to call a function named displayMenu(), passing it the name of the frame and the name of the variable that represents the menu to open.

  <a href="#" onmouseover="displayMenu('mainFrame', 'menu1')">Menu 1</a>

To display a menu in the right-hand frame, the function basically follows these steps.

  1. If another menu is open, close it.
  2. Get a handle to the menu based on the frame and variable names given.
  3. Calculate a position for it on the righ-hand frame so that it will appear next to the link on the left-hand frame.
  4. Open it.

The details of the function code are given next...


Prev    Next