One of the most common questions asked at the OutFront forums is "How do I make rollover navigation buttons?"

These are basically created by having two different images for each navigation bar item and showing one or the other depending on whether or not the navigation item is moused over. 

While the procedure for making them is very simple, it does require a little practice and the use of a JavaScript, which for those new to creating web pages can seem a little daunting. However no  knowledge of JavaScript required and the making of nice buttons is well within the grasp of anyone with any graphics program. It just takes a little organisation and planning to get them looking professional and effective on your site.

This guide will take you step by step through the process, from creating the images, generating the JavaScript and finally to getting them onto your pages.

Get the Look

The first task is to create the images for your buttons. This can be done in any graphics program, the terminology for what you do may very but the principles and the steps are the same.

We are going to use an example with 4 buttons in a simple curved navigation bar. The effect we are aiming for is on the left below, with the two sets of images required alongside, separated for clarity.

End Result	'Off' Images	'On' Images

Creating Your Images

You will need to create two images for each button - the 'off' button (which is what it looks like most of the time) and the 'on' button (which is what it will look like when moused over). 

For the purposes of this article I will call them 'nav1_off.gif, nav1_on.gif, nav2_off.gif, nav2_on.gif etc.

So this is nav1_off.gif

And this is nav1_on.gif

In this case the images are made by first creating the whole curved shape and placing the text on it for the link names. You can then slice the image to get the final individual buttons.

It is very important that the different colour buttons are the same size and shape, otherwise you have a disconcerting shift in the layout when the navigation is moused over in the final page. 

Most graphics programs make this relatively easy. You can save the button in one color, then by changing the colors of the button and text layers (or sprites), you have a new version that is identical in every way apart from the colors.

Once you have the images created save them to the images folder in the site they are designed for.

Now we need to make the buttons roll!

>> Part II: Creating the JavaScript