Creating the JavaScript

To make the rollovers happen will require some JavaScript. Fortunately you do not need to know anything at all about JavaScript to get a hold of what you need, there are a number of free generators that will make you script for you.

For the purposes of this article we will use the this generator from The JavaScript Source.

This is not as fully featured as some, but is simple to use and produces good results. There are links to some others at the end of the article.

The generator asks you to fill in three items of information for each button in your navigation

• #1  
  Enter the path to your first off button here.

  You need to enter the path to the image from the page in which it will appear. Let's assume that the page is in your main root folder, where the index page appears. For the moment make it so. We will look later at what you need to do to ensure that the buttons appear correctly on pages in subdirectories.

  Enter: images/nav1_off.gif

• MOI1 
  Enter the path of your first on button here.

  The path will be the same as above, only the image is different.

  Enter: images/nav1_on.gif

• URL
  The page to which you want this button to link

  In the case of the first button this will presumably be the home page. Remember the path should be relative from the page where the navigation will be. So if you were linking to a file in a subdirectory you would use: foldername/filename.html. In this case though, since the page is in the same folder as the index page, a simple file name will suffice.

  Enter: index.html (or the name of your home page if different) 

Repeat this process for each of your buttons.

Your form will look something like this:

In our case there are only 4 items for which we need to enter information. This generator only allows for 5 buttons, but, as we will see later, it is easy to add more later if your navigation has more than that number. If you have a navigation bat with, say, 8 buttons, just make the script for the first five, you can edit it later to include more.

When you have the information for all the buttons filled in just click "Make My Script". The necessary code will appear in the text areas at the bottom of the page. 

Time now to make it happen on the page

>> Part III: Placing the Code into Your Page

<< Part I: Creating the Images