This technique uses a single image as a menu button. By using a gif or png button image with a transparent inner area you can cause the inner background color as well as the text color to change when the cursor hovers over the menu button.

Is it perfect? Far from it. The inner background color change sometimes happens before the text changes color. Only when the text changes color does the menu link work. But most users will automatically place their cursor over the text words, so this won't usually matter.

Click here to download source and image or simply click the menu button at top. The source only contains the first two buttons.

How would you use this menu? Well, you could create a table with 2 rows. The first row might contain a logo, etc. and the second row could contain a row with some background color and the menu table could be centered in that row. I sometimes create a page whose width will be exactly the width of "x" number of menu buttons. Say the menu button is 211px like the ones above. If you had 4 buttons, then the page width would be 4x211 or 844px. That way, the menu would stretch completely across the page.

INSTRUCTIONS FOR USE

Set the image source, height, and width in the td.menubox style line. Set the starting background color (which will show through the transparent area) in the table.menubox line, and set the hover color in the td.menubox:Hover line.

You can use text-align:center in the td.menubox style line, but then you would have to place the cursor directly on the words "Home" or "Second Page" before they would change color (and act as a link) when you hover over the menu button.

If the background color of the button's inner area doesn't change colors when you move your cursor over it, then you probably used the wrong (or none at all) DOCTYPE at top of your code.

Why the use of text-decoration:none? Many users have all links automatically underlined. The text-decoration:none insures that the text is not underlined.

HINT: This page contains the instructions for use. The Second Page is blank, and intended for you to copy it's source for your use.

You may also like to view Bill's HTML Builders Guide. Click here to view it.