(Site Identification)

'Eye' Focus: Web Support Tutorials

JavaScript: DropDown Menu

Table of Contents:

(to Top) Menu Demo with RollOver Image Links

(to Top) Calling the Script

This menu uses the following call to the DropDown Menu script:

The options used here tell the script to render the following menu:

  1. "h" = horizontal main menu
  2. "mb" = mouseover/rollover links for the main menu, with bullets
  3. "<img src=\"images/arrow.gif\" width=\"8\" height=\"10\" alt=\"\" />" = the HTML code for an image that has been properly encoded for a JavaScript string variable
  4. "7" = select main menu item seven for highlighting

(to Top) Defining the Links

We have already used images and a horizontal bar in the previous examples. Here, there difference is that we will also use mouseover/rollover images. This requires an additional set of images for the hover/focus interaction with the menu. The extra image group uses -1.gif in its file name to indicate hover/focus image.

We are also using bullets for the sub-menu items, and even an image to indicate the availability of other menus. Additionally, the sixth item of the main menu uses images in the sub-menu. This shows how other HTML information can be used in the menus themselves.

In addition to the coding explained in the previous examples, some additional information is needed for the mouseover/rollover images. This information will pre-load these extra images in the browser. Here is an example for mouseover/rollover coding of the two links explained in the 'Image Links' demo: (skip code)

var imgs = "images/";

var pics = new Array(
  "intro", "80", "24"
  "text", "80", "24"

Again, the 'imgs' variable specifies where to find the images on the web server. The next part is an array of values. Simply provide the name of the image, its width, and its height. These values must be comma separated with each value quoted. The groups of three values must also be separated by a comma.

The rest of the necessary coding is explained in the prior pages of this tutorial. Please feel free to check out and test each example to see how they are built and defined.

[Updated: Sunday, November 18, 2007]