Tutorial: 6. How to modify the JavaScript rollovers

Level: Intermediate. Published on 3 March 2003 in How to change the menu options

This tutorial shows you how to edit PageKits with graphical rollover menus.

A lot of the PageKits feature some JavaScript to make the menu images change when you move the mouse over them. This technique is often called a rollover. Here we'll show how a rollover works. We'll also look at how to modify the JavaScript when you add your own menu options to a PageKit.

1. The anatomy of a rollover menu

A rollover menu consists of the following elements:

1. A "normal" image for each menu item (usually a GIF or a JPEG)
2. A "rollover" image for each menu item (usually a GIF or a JPEG)
3. Some JavaScript to create the image objects for the images (in other words, to tell the browser about them)
4. Some JavaScript to swap the images when the mouse moves over or away from the menu item(s)
5. img tags to place the button images on the page
6. a tags to link the buttons to different pages, and also to tell the browser to run the JavaScript that swaps the images over.

Let's look at each of these parts in turn.

2. The "normal" and "rollover" images

These are the two images that make up a rollover menu option. They are usually called option_off.gif and option_on.gif, where option is the name of the menu item. There are _off and _on images for every menu option in the PageKit. For example, here are the rollover images for the Footdown PageKit:

about_off.gif	news_off.gif	guests_off.gif	travel_off.gif	links_off.gif	email_off.gif
about_on.gif	news_on.gif	guests_on.gif	travel_on.gif	links_on.gif	email_on.gif

If you're making your own menu options for a PageKit with rollover menus, then you'll need to make your own _off and _on images for these options. See Changing image-based menu options in Photoshop or Changing image-based menu options in Paint Shop Pro for details.

3. The JavaScript to create the Image objects

For the browser to be able to work with rollover images, and swap them over as the mouse moves over the options, it needs to know about the _off and _on images, and where to find them on the site. We tell the browser about the images by creating Image objects to represent each image, and then telling each object where to find the actual image that it refers to. Here's how we do it:

option_off = new Image ( );
option_off.src = "images/option_off.gif";

option_on = new Image ( );
option_on.src = "images/option_on.gif";

Here we have defined two Image objects, option_off and option_on, and given each object a source (image file), "images/option_off.gif" and "images/option_on.gif" respectively.

Each menu option in the PageKit needs its own Image object, so you will find the above 4 lines of code repeated for all the menu options in the PageKit. If you want to add a new menu option, for example, "music", you'll need to add 4 new lines of code as follows:

music_off = new Image ( );
music_off.src = "images/music_off.gif";

music_on = new Image ( );
music_on.src = "images/music_on.gif";

4. The JavaScript to swap the images

In addition to creating the images, we need some JavaScript to swap the images. This is achieved through the two functions button_off() and button_on():

function button_on ( imgName )
{
  if ( version == "n3" || version == "e4" )
  {
    butOn = eval ( imgName + "_on.src" );
    document [imgName].src = butOn;
  }
}

function button_off ( imgName )
{
  if ( version == "n3" || version == "e4" )
  {
    butOff = eval ( imgName + "_off.src" );
    document [imgName].src = butOff;
  }
}

You don't need to worry about how these functions work, and you won't need to alter them to create new menu options.

5. The menu option img tags

That's all the JavaScript taken care of. The next part of a rollover menu is the img element. This places the actual, "normal" menu option on the page. It takes the form:

<img src="images/option_off.gif" width="x" height="y" border="0" name="option">

Note that the image source, "image/option_off.gif", should be the same image as the option_off.src image described in Step 3 above.

Note also that the name="option" part must be in the tag, and that the name (in this case "option") should be the same as the first part of the image object names, without the _off and _on parts.

For example, if you had created a new menu option with images music_off.gif and music_on.gif, you would put name="music" in the img tag.

There should be one of these img tags for each menu option in the PageKit's menu. The values x and y should be replaced with the image's real width and height.

6. The a tags

Around each of the img tags above, we need to place <a></a> tags to turn the image into a link, and also to tell the browser to run our JavaScript to change the image when the mouse moves over it.

The a tag takes the general form:

<a href="option.html" onmouseover="button_on('option'); return true"
 onmouseout="button_off('option'); return true">(img tag in here)</a>

The a element has three sections:

1. The href section. This is where you specify the page that the menu option should link to. For example, if you were linking to a page about music, you might put href="music.html" in here.
2. The onmouseover section. This section tells the browser to run our JavaScript function button_on() when the mouse moves over the menu option. This is the code that makes the rollover actually happen. Note that the name inside the brackets must match the name of your menu option (e.g. 'music').
3. The onmouseout section. This section tells the browser to run our JavaScript function button_off() when the mouse moves away from the menu option. Note again that the name inside the brackets must match the name of your menu option (e.g. 'music').

These <a></a> tags are wrapped around the img tag for the menu option, as described in step 5 above. So an entire menu option might look like this:

<a href="option.html" onmouseover="button_on('option'); return true"
onmouseout="button_off('option'); return true"><img
src="images/option_off.gif" width="x" height="y"
border="0" name="option"></a>

7. Putting it all together

If we wanted to add a new menu option called "music" to a Pagekit's rollover menu, here are the changes we need to make:

Create the normal and rollover images

Create your music_off.gif and music_on.gif images. (See Changing image-based menu options in Photoshop or Paint Shop Pro.)

Open the HTML file

Find and open the main HTML file that contains the menu. This is usually called something like index.html or, if it's a framed PageKit, main.html. Often the menu will appear in all the pages in the PageKit, in which case you'll need to edit each of the pages in the same way.

For help with opening HTML files in a text editor, see Changing text-based menu options.

Define the new Image objects

This JavaScript code goes below the other, similar lines near the top of the page. Alternatively, if you're replacing an existing menu option with your new option, then just remove the old menu option code and add this code instead:

music_off = new Image ( );
music_off.src = "images/music_off.gif";

music_on = new Image ( );
music_on.src = "images/music_on.gif";

Create the a and img tags

Place this HTML in the page next to the other menu options or, if you're replacing one of the existing menu options, then delete the old menu option's a and img tags and add this code instead:

<a href="music.html" onmouseover="button_on('music'); return true"
onmouseout="button_off('music'); return true"><img
src="images/music_off.gif" width="x" height="y"
border="0" name="music"></a>

Then save the file, and open it in your Web browser to check it (you can usually do this by double-clicking on the file's icon). Check that the rollover works by moving the mouse over it.

That's it! If you're having difficulties, take a look at our tutorial on JavaScript rollovers. If you're still having problems then check out our webmaster forums - someone there should be able to help you out. Good luck!

The end

That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!

Top of Page