Pre Loaded Image Swap

The rollover state of the image is loaded into the background of the list element. The normal state of the image is in the background of the anchor. On a:hover the background is simply made transparent to let the image underneath shine through.

CSS

ul#navdot {
width:120px;
background:#ffffff;
border:0px;
margin:10px; list-style:none;
}

#navdot li {
width:120px;
height:30px;
background: url(images/button-on.gif) no-repeat center center;/* rollover state*/
margin:5px
}

#navdot a {
display:block;
background:white url(images/button-off.gif) no-repeat center center;/* normal state*/
width:120px;
height:30px;
text-align:center
}

#navdot a:hover {
background:transparent;}

HTML