(Site Identification)

'Eye' Focus: Web Support Tutorials

DropDown Menu: Image Links

(to Top) Menu Demo with 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. "i" = image links for the main menu, with bullets
  3. "}" = a list indicator defined with the right curley bracket (}) which is also the default
  4. "6" = select main menu item six for highlighting

(to Top) Defining the Links

Using images for the main navigation is not that difficult. However, a few things must be completed before they will work. First, you will need the images. Only one set is necessary, but if you expect to use the highlight feature will need to make a second highlighted set.

Next you need to define your images in the menu data file. Lets say you will be using two main menu items with highlighting, this means you will need 4 images. Here is an example:

This makes a total of five values required for each item in the main menu with a link, four values if there is no link. You also need to define the 'imgs' variable with the location of the images so that the browser can locate these images on your server.

[Updated: Sunday, November 18, 2007]