Design Resources

HTML/CSS: Mock Rollovers Using CSS

Rollover Construction

Page 1, 2.

Step1: Create the button image for both states. Concatenate the images, side by side, into one image file. The inactive state is on the left, active state on the right. Both states must be exactly the same pixel dimensions to give a final image 2x's that dimension.

The example image above is 272px X 26px, giving 136px X 26px for each image state.

Step 2: Construct your html button elements. You can use any element such as a list <li></li>, table cell <td></td>, or div <div></div>. The example above is a div;

<div></div>

Assign the containing element for each button a unique ID and nest an empty link inside each container;

<div id="roll_1">
<a href="#">&nbsp;</a>
</div>

Step 3: The CSS tasks required for this effect includes;

1. Giving the parent container the dimensions of a single state of the final rollover image, e.g. 136px X 26px.
2. Assigning the same dimensions to each <a href> state.
3. Change each <a href> state to a block level element.
4. Finally, apply the image as a background to each <a href> state, aligned to the necessary horizontal position to create the rollover effect.
   i.e. a:link, a:active and a:visited align left, a:hover align right.

<style type="text/css">
<!--
#roll_1 {
height: 26px;
width: 136px;
}
#roll_1 a:link, #roll_1 a:active, #roll_1 a:visited {
background-image: url(imgs/css_mock_rollover.gif);
background-repeat: no-repeat;
background-position: left;
display: block;
height: 26px;
width: 136px;
}
#roll_1 a:hover{
background-image: url(imgs/css_mock_rollover.gif);
background-repeat: no-repeat;
background-position: right;
display: block;
height: 26px;
width: 136px;
}
-->
</style>

The resulting CSS rollover effect gives an effective cross-browser rollover solution that eliminates any need for javascript or preloading separate images.

Enjoy!

... Design Resources Index :: This Tutorial Page 1, 2.