Documentation/JavaScript Menu

This text documents the JavaScript layer menu written by Marcos Kreinacke as
used on the GABA Website created and maintained by Spallek.com.


OVERVIEW


The menu consists of several parts which may be buried within html documents.

"menu.js" contains the functions used to create and control the menu.
For cross-browser-compatibility it relies on an API called "RelativeLayers".
This API (or Library) is split up in files named "rl_*_stripped.js" and is
published under the LGPL.

The HTML-document from which these Scripts are included is currently
dynamically created employing server-side PHP scripting on GABA's Web-Site.
Please make sure the script-includes link to absolute URLs instead of relative
ones as in the prototype-version. This requirement gives you the chance to
include the scripts from HTML-documents in subdirectories.

The same HTML-document contains a list of Layers: <div id="layer...">...</div>
All HTML code for the menu is collected within these layers. Images that are
swapped (to other images of the same size but inverted colors) on mouseover
events as well as the necassary event-handlers are defined here.
Functions "m_open()" and "m_close()" to be called on mouseover/mouseout are
defined in "menu.js".


MODIFYING THE MENU


Adding and removal of complete pulldown menus are agreed to be performed by the
author and thus not covered in this documentation.
Changing sizes of menus (image width and height) require even more steps and
are, too, subject to contact the author.

Modifying menu entries is a matter of replacing two images as well as the
corresponding link.

Adding and removal of menu entries though requires changes in both files, the
HTML-document and "menu.js".


MODIFYING THE HTML-DOCUMENT


First of all, find the menu layer that you wish to modify.
A layer looks like this:

<div id="layer26">
<img src="images/blue.gif" width=106 height=1 border=0><br>
<a href="46.html" onmouseover="document.images['image2601'].src='images/26_01_a.jpg'; m_open(26);" onmouseout="document.images['image2601'].src='images/26_01_ia.jpg'; m_close(26);"><img name="image2601" src="images/26_01_ia.jpg" width=106 height=13 border=0></a><br>
<a href="47.html" onmouseover="document.images['image2602'].src='images/26_02_a.jpg'; m_open(26);" onmouseout="document.images['image2602'].src='images/26_02_ia.jpg'; m_close(26);"><img name="image2602" src="images/26_02_ia.jpg" width=106 height=13 border=0></a><br>
<img src="images/blue.gif" width=106 height=1 border=0><br>
</div>

Removing an entry is easy: erase the complete line and don't worry about the
image numbering being interrupted. Those numbers were chosen for the author's
overview and have no meaning to the underlying JavaScript functions.

Adding an entry requies basic knowledge of the core functions. The easiest way
is copy-and-paste. To append an entry, copy the last line and modify its
image-names and the link it is pointing to. "m_open()" and "m_close()" have the
menu-number as an argument, "26" in this example. It is important that this
number is the same as in the div-statement: id="layer26"!
This number is used by the core functions to control the opening and closing of
menus.
The image's internal name has no meaning outside this layers and can be
changed to whatever you wish. It is recommended to concatenate "image", the
menu's number and the entry's number, such as "image2601". This might help to
maintain the menu.
The image's file name (e/g: "images/26_01_a.jpg") follows the same conversion
and has no meaning outside this layer.


MODIFYING THE SCRIPT


The script-file "menu.js" dynamically shapes the layers that were defined in
the HTML-document.  Modifying the layers often requires changes in this file.

The script is divided into four sections:

Section I:   Variable definitions
Section II:  Menu functions
Section III: Menu configuration
Section IV:  Layer definitions

Sections I and II represent the menu's core and need no changes! Modifications
which lead to changes in these sections are not covered in this documentation
and require deep knowledge of the script's core.

Section III only needs updates when complete menu's are modified. Those
changes were agreed to be performed by the author and are not covered here.
If you wish to apply any changes yourself, you must read and fully understand
the complete script! You have been warned.

Section IV needs to be updated according to the changes made in the
HTML-document.

Section IV of "menu.js" contains one seven-line container of JavaScript
statements for each layer as defined in the HTML-document.
Such containers look like this one:

1:   m_layer[26] = new RelativeLayer(
2:   "layer26", "", "",
3:   "106","80",LEFT,"672",TOP,"96","-50%","-50%",
4:   "100%","100%",LEFT,"50%",TOP,"50%","0","0",
5:   "#ffffff");
6:   m_layer[26].setVisible(false);
7:   m_layer[26].setZIndex("2");

The naming follows a simple rule: the layer ID is the same as in the
HTML-document ("layer26" in this example), the JavaScript object is an array
element of "m_layer[]". The naming cannot be changed through simple operations.

Let's go through this code line by line:

1: Create a JavaScript object employing the RelativeLayers API.
2: Use the given ID to find the right layer from the HTML-document.
3: Specify the layer's geometries.
4: The RelativeLayers API allows available areas in layers to be larger than
   their visible areas. This technique is not used in this menu, so default
   values are entered.
5: Define the layer's background color; unimportant as the whole layer is
   covered by images.
6: Dropdown menus are only shown when opened by the user, invisible by default.
7: Layers can overlap. Dropdown menus must be above all other layers.
   A high ZIndex ensures this.

When adding and removing menu entries you need to update line 3.
The first two values define the layer's size: All menu layers are 106 pixels
wide. The height must be calculated from the images' sizes. Add two for
the blue top and bottom line ("images/blue.gif").
Example:
Six menu entries, each image is 106x13 pixels, a blue line at the top, another
one at the bottom. Height/pixels = 6*13+2=80.


COPYRIGHT


The JavaScript menu and this documentation were written by Marcos Kreinacke of
NETTEC-SYSTEME GmbH, Germany <m.kreinacke@nettec-systeme.net> as ordered
by Heiko and Gisela Spallek of Spallek.com, U.S.A. (http://www.spallek.com/)
for the GABA Website.

The underlying Library RelativeLayers is written and maintained by G. Bevin
<gbevin@theleaf.be> and distributed under the GNU Lesser General Public License.
Please see the file COPYRIGHT-RelativeLayers for more information.