Close-up of the Dynamic Code

The menuSetup function (lines 73-115) alone generates the HTML code for all our menus. Here, we will just go over the beginning of the function:

73: function menuSetup(common_name) {
74:   var array = eval(common_name + "Array");
75:   var layerHTML = eval(doc + '[common_name + "Layer"]' + htm);
76:   var menu = '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>';
77:
78:   menu += '<TR><TD COLSPAN=3><IMG SRC="top.gif" BORDER="0" WIDTH="220" HEIGHT="2"></TD></TR>';
79   for(var i = 1; i <= array.length-1; i++) {
80:     menu += '<TR><TD WIDTH="30"><IMG NAME="'+ common_name + "_" + i +'" SRC="'+ array[i].image +'.gif" BORDER="0"></TD>';
81:     menu += '<TD BACKGROUND="screen.gif" WIDTH="181" HEIGHT="22">';

[...]

When called up, our function receives as an argument the name of the menu to be processed (through the common_name variable). This information permits us to deduce the following identifiers:

• the name of the associated array (line 74);
  
  
• the name of the layer onto which the code will be inserted (line 75).
  
  

The appropriate HTML code for the menu is then generated. The menus are created in the form of HTML tables.

The Menu variable first receives the starting code for a HTML table (lines 76-78). Then a for...next loop processes each item of the given array. At each cycle, a new row is created (there will be as many rows as there are items in the menu: array.length-1).

All the details needed to create the table are obtained from the array indicated by the argument passed to the menuSetup function.

As an example, examine the following instruction:

80:       menu += '<TR><TD WIDTH="30"><IMG NAME="'+ common_name + "_" + i +'" SRC="'+ array[i].image +'.gif" BORDER="0"></TD>';

Are you still with us? Then let's continue!

What about the dynamic effects?

Writing regular HTML does not produce anything dynamic. The trick is to insert onMouseOver events directly into the <A> tags. To do this, we will use the name of the associated image file: indeed, we can identify a sub-menu by means of the folder_closed image.

Each time a menu item is assigned to this image, we will add an event to its <A> tag that will trigger a call to the toggleMenu function. This one deals with the display of the relevant sub-menu.

And if the image used is mail_dn, the <A> tag will point to a mailto: instruction.

As for simple items (link_dn), clicking on one of them will produce the following actions:

• the parent menu is closed through a simple call to ToggleStart;
  
  
• the targeted page will be loaded into the iframe through the loadPage function.
  
  

And, lastly, the code is inserted into the page and the result is displayed in the visitor's browser.