So you want to make rollovers and not have to deal with messy javascript? Good choice, CSS can do this for you. We’re going to show the top 50% of an image, and when you put your mouse over it, we’ll change to the bottom 50%. This is better than traditional rollovers in that we’re not calling a 2nd external image every time someone rolls over it.

You’ll need to make an image with twice the height of the original and have the rollover on the bottom half. Here’s the image I’ll work with in this example:

Once you have your rollover ready, we’ll start by pasting the following into your CSS stylesheet. Our image above is 200×100 pixels so we’ll define those dimensions below, except 1/2 the height, so 50px. Change the background image URL to where you uploaded it on your webserver.

Save your stylesheet and insert the following code wherever you want your rollover to appear in your document.

You can implement the basic concept a number of different ways than described above, try it out and see what works best for your project. Our final product will look and function like: