Rollovers in CSS

CSS rollover: Example: rollover in your navigation

We will create a rollover using only css for our navigation.

1. We are going to start by using illustrator or photoshop to create the on and off states of your navigation. First, Create the off-state of the navigation. In this example the div is 30px by 100px and the navigation is about.



2. Double the height of this document and copy the off-state and paste it in the other half in the exact same position as it is on the upper half. Change the color in the bottom half(or whatever differentiates it as the on-state).


3. Save for web devices

4. In the html, you have something that looks like this:
<div id="nav_about"><a href="about.html"> about </a> </div>


5. The id is named nav_about. The link goes to the about.html page. The “about” text will not be shown because the css will position the text in this id 100em’s out of the document as you will see in the next step.

6.The css will look something like this:


#nav_about a:link, #nav_about a:visited{
height:30px;
width:100px;
float:left;
text-indent: -100em;
background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background- position:top left;
}


#nav_about a:hover, #nav_about a:active{
height:30px;
width:100px;
float:left;
text-indent: -100em;
background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:bottom left;
}

7. This basically says that when the link has been visited or is just a link (the off-state) then the background image will be positioned from the top left of the image. In the hover or active state the background image will be positioned from the bottom left and hence show the on-state of the image. The text-indent will position the text in the html out of the document. The height and width is defining the parameters of the div. With a height of 30px, you know that the image that you are using for both the on and off state would be 60px (30x2) in height and 100px wide.