I found a really good site that shows how to create a rollover affect by only using CSS. I’ve always used javascript via Dreamweaver, but thought it was very interesting of why using CSS was better. I am now going to use CSS for all my future rollover effects.

Why should you use CSS over javascript?

What you’ll find, though, is that the button “flickers” the first time you move the mouse over it, as the browser fetches emailUsRollover.gif from the server. In other words, most browsers don’t preload the background image of the :hover state. By combining both our normal and rollover states in a single GIF, we’re forcing the browser to “preload” the rollover state image as it fetches the normal state image.

An alternative approach might be to use a JavaScript preloader, or a hidden img element in the page, to preload emailUsRollover.gif, but then we’re kind of losing the point of having a non-JavaScript, pure-CSS rollover!

CSS:

#home
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px;
  background: url("images/button/home.jpg") no-repeat 0 0;
}

#home:hover
{
  background-position: 0 -35px;
}

#home span
{
  display: none;
}

HTML:

<a id="home" href="LINK" title="home">home</span></a>

Image:

Lets take it one step further. Instead of using separate images for every link, why not use one image to control all the links? All you have to do is create a single image and use CSS to point to the right coordinates of the main image. It is really called a CSS Sprite.

Main Image:

CSS:

#home
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 0;
}

#home:hover
{
  background-position: 0 -35px;
}

#home span
{
  display: none;
}

#about
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -70px;
}

#about:hover
{
  background-position: 0 -105px;
}

#about span
{
  display: none;
}

#blog
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -140px;
}

#blog:hover
{
  background-position: 0 -175px;
}

#blog span
{
  display: none;
}

#brands
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -210px;
}

#brands:hover
{
  background-position: 0 -245px;
}

#brands span
{
  display: none;
}

#gallery
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -280px;
}

#gallery:hover
{
  background-position: 0 -315px;
}

#gallery span
{
  display: none;
}

#press
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -350px;
}

#press:hover
{
  background-position: 0 -385px;
}

#press span
{
  display: none;
}

#events
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -420px;
}

#events:hover
{
  background-position: 0 -455px;
}

#events span
{
  display: none;
}

#contact
{
  display: block;
  width: 115px;
  height: 35px;
  position:relative; left: 15px; margin-bottom: 5px;
  background: url("images/button/sidelinks.jpg") no-repeat 0 -490px;
}

#contact:hover
{
  background-position: 0 -525px;
}

#contact span
{
  display: none;
}

HTML:

<a id="home" href="/home" title="home"><span>home</span></a>
<a id="about" href="/about" title="about"><span>about</span></a>
<a id="blog" href="/blog" title="blog"><span>blog</span></a>
<a id="brands" href="/brands" title="brands"><span>brands</span></a>
<a id="gallery" href="/gallery" title="gallery"><span>gallery</span></a>
<a id="press" href="/press" title="press"><span>press</span></a>
<a id="events" href="/events" title="events"><span>events</span></a>
<a id="contact" href="/contact" title="contact"><span>contact</span></a>