Web Design: Menus to see in the dark

GRAPHIC BUTTONS are often unhelpful because, unlike text links, they do not change to reflect the content that has been selected. Visitors have no visual way of determining where they are or where they are about to go. This week, we will learn how to rectify that by creating a graphic menu that will change as the user navigates through the site. Last week, we learned how to toggle between two different graphics (http://www.independent.co.uk/net/ 981116 ne/story5.html). We will be applying that technique here with some slight modification. If you have trouble with this code visit:http://www.webbedenvironments. com/ 45b.html

Create the graphics

First off, create three version of each graphic button, one for each "state" that the button can have:

off - used when the button is not selected.

rdy - used when the mouse pointer is over the button and it is ready to be selected.

on - used when the button is the currently selected option.

Each of these three versions is used at different times depending on what is happening on the screen. For this example I have created nine different graphic (three states for three different options) and used different drop shadows and tabs for the different states. You could use whatever graphics you wanted, just make sure each state looks different.

Set up the Frames

Now set up two frames: one for the menu and one to hold the content.