http://www.designmeme.com/articles/cssrollovers/
This is a technique for creating CSS Image Rollovers with a single transparent GIF image. Learn how to create a simple rollover image using CSS as well.
Cascading Style Sheets (CSS) can be used to change the background colour behind transparent .gif images. The changing background colours show through the transparent portions of the image.
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!
Here is the HTML used to create this rollover. You may notice that it is much shorter, and easier to remember than a JavaScript rollover. Essentially, you just need to define a class and everything else is handled with CSS
<div class="rollover">
<p>
<a href="#"><img src="stuart.gif"
width="32" height="32" border="0"></a>
</p>
</div>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><div> tags, tables, and/or CSS positioning to better control the placement of these rollovers on your page. For a working example, take a look at the left-hand navigation on this site.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.
