Creating An Image Rollover Within CSS

CSS or Cascading Style Sheets are the life blood of modern web design. Within CSS, you can build almost any design element you need, from button rollovers to complex page transitions. Today, I will be showing you how to create a button rollover with one image instead of a set of images.

To begin, you need to have your base image. Your base image contains all the button states (Hover, Click, and Static). You can download the image I created here or make your own. The image I created is 100 pixels wide and 150 pixel high. Now that you have your image, you still need to tell your site what to do with it.

The first step is to build your menu which will house the our navigation buttons:

This section contains the button image and navigation layout:

#menu { width: 100px; height: 50px; position: relative; z-index: 9998; background-image: url(‘images/NavBar.jpg’); background-repeat: no-repeat; }
#menu #menunav { margin: 0; padding: 0; }
#menu #menunav li { display: inline; }
#menu #menunav li a { float: left; height: 50; overflow: hidden; }
#menu #menunav li a,
#menu #globalsearch { background-image: url(‘images/NavBar.jpg’);}

This section tells the CSS what part of the image we want to use as the static image. Notice the back ground position is set to 0px by 0px this let’s the site know that the image does not need to be altered in any way:

#menu #menunav li#home a {width:100px; height: 50px; background-position: 0px 0px;}

Now that we have our Static image position se,t we need to make our rollover or hover state. This time, it is not necessary to supply a height and width since the CSS will use the default from the static state. To show the rollover state, we need to change the position from 0px by 0px to 0px by -50px. Changing the last position to -50px tells the CSS that when the button is scrolled over or hovered on that the image should display starting at 50 pixels below the top of the image as a whole:

#menu #menunav li#home a:hover { background-position: 0px -50px; }

The last state of our button to create is our clicked or active state. The active state is where the user has clicked on the current button. You achieve this just like the rollover state before. This time, change the last position to 100 pixels so the image starts at the beginning of the last section of the image:

#menu #menunav li#home a:active { background-position: 0px -100px; }

Now that we have our CSS created and Image made let’s build the actual HTML coding to make the button work. You build the code like below:

<div id="menu">
<ul id="menunav">
<li id="home"><a href="http://www.codeflu.com"></a></li>
</ul>
</div>

Finally let’s see the code in action:

#menu { width: 150px; height: 50px; position: relative; z-index: 9998; background-image: url(‘http://www.codeflu.com/wp-content/uploads/2009/NavBar.jpg’); background-repeat: no-repeat; }
#menu #menunav { margin: 0; padding: 0; }
#menu #menunav li { display: inline; }
#menu #menunav li a { float: left; height: 50; overflow: hidden; background-image: url(‘http://www.codeflu.com/wp-content/uploads/2009/NavBar.jpg’); }
#menu #menunav li#home a {width:150px; height: 50px; background-position: 0px 0px;}
#menu #menunav li#home a:hover { background-position: 0px -50px; }
#menu #menunav li#home a:active { background-position: 0px -100px; }

There you have it. This is a very simple way to use CSS to save on overall site loading time and create high impact of a more dynamic and interactive website.

Leave a comment