To the right I conduct an experiment that proves that using absolute positioning and CSS rollovers can save you 3kb on a page with an 8 button image rollover nav bar. That however is not all you will save!

If you study the basic concept of a CSS rollovers you will find the true power is in writing the text to be displayed on the buttons in the HTML, as apposed to saving the rollover images with text as a part of the image its self.

So go to photoshop and remove the text from your button image. Then just save the background images of your rollover states (up, over, down) and using CSS rollovers you are able to call on the same two or three images as the background for the whole nav bar!

So now, lets say I am using the JavaScript rollovers When I visit that page I have to load 8 buttons and pre-load 8 over states (and 8 more down states if you are using them) so that's two images for every button.

Using CSS rollovers I could shave that down to loading 1 image and pre-loading 1 more. No matter how many buttons I want to have down the side, I just type in the text that the rollover button will display into my HTML and make sure to give the link the correct class to display and swap backgrounds correctly.

Using this method I have reduced loading time by nearly two thirds! All together the CSS rollovers nav bar loads 6 images*. While the JavaScripted rollovers load 16 (two for each button). You can see the advantage, especially if you do not need a top and bottom for your nav bar like I do. Then you could use the same two images for the up and over states of every button on your nav bar.

I have not worked out all of the bugs yet, but I am working on it. I always enjoy when my visitors send me their; comments, questions, criticisms, pearls of wisdom, and helpful hints, so please don't be shy! Use the contact form.

*Note
The example of CSS rollovers I use here has a call to 6 images:
Two (over and down background images) for the top button, two for all 8 of the middle buttons, and two for the bottom button.

"Cocoa Puffs Show Down"
So there is a red puff and a blue puff, and they are in a samurai style arena battle. The red Puff kicks butt, but proves to be no match for the child pouring milk in his bowl of Cocoa Puff's cereal (the arena).

Looking to hire a web designer? Check out Steve's portfolio. It features all sorts of cool tips and tricks that can help: web developers, code writers, and potential employers find what you are looking for..

My print work sequence

My brothers wedding gift
I put a disposable camera on each table at the reception and had the site ready in time to be sent out with the thank you cards.

I have written a few different versions of CSS rollovers:

These are some CSS driven drop down menus, I created for a client:
CSS Drop down menu

Then the client requested that a small message appear when you rollover a sub category of the menu.
Here is a text/image swap solution of my own:Text/Image swap Having half the image files, and none of the javascript, everything is streamlined and the page will load faster. CSS rollovers are an alternative to javascript.

I did an experiment to test the difference in file size between a page written with: CSS rollovers and absolute positioning , and an almost identical page written with JavaScripted rollovers and table structure for layout.
Here are the results:

I used the navigation menu from my portfolio website:

one version is written using: tables and javascript rollovers (7kb)

and V2 is written using:
CSS positioning and CSS rollovers
(4kb).
I also added two menu items on to this version. If you read "loading allot less images" the article to the left, you will find that adding two menu items dose not make much of a difference when dealing with CSS rollovers.

The CSS rollover version has never been glitch free. It dose still seem to freak in some browsers and is not reliable for slower connection speeds.

Also check out my CSSZengarden designs.

CSS Zen Garden Design #1 San Digeo Rollovers
CSS Zen Garden Design #2 Space Garden