An Example

Move your mouse over the image below - a red outline should appear. This was done using only 1 image, and without any JavaScript!

The Style Sheet

The key to making this work in all modern browsers is to define your links as block elements in your style sheet ( display: block ), and making the width the same as your image's ( eg. width: 32px ). Choose a background colour for your link that matches your page background and a second colour that you want for the rollover effect ( defined in a:hover ). For example:

<style type="text/css">
<!--
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000}
-->
</style>

This will create one rollover image per line. You can then use nested <div> tags, tables, and/or CSS positioning to better control the placement of these rollovers on your page.

Why would you use CSS instead of Javascript?

• Less code for you to write and debug
• 50% fewer image files to create / update
• 50% fewer images to download saves bandwidth
• Changing the text and rollover colours is fast and easy.