Step 1. First thing’s first. You have to make the images for your rollovers, [provided that you don't know how this works, I'll take a moment to explain. If you have your rollover images ready, then just continue on to step 2.

In CSS mouse hover rollovers, both the "on" and "off" images are contained within the same single image, usually directly above or aside each other. Observe the following button from my own WordPress theme: [note: i've changed the colors of this image to make it easier to see against the background.]

You can see how both versions of the button are directly above each other. [The button is 360 pixels wide, 50 pixels tall. So I made the image 100 pixels tall to accomodate the second button.] When this image is applied as a background to a div, the “off” version will be showing. We can give it some simple code to instantly shift the background exactly 50 pixels vertically to show the “on” image when we hover our mouse cursor over it. The overall benefit of this is that it’s lighter weight in resources, and the rollover “on” image is instantly preloaded with the “off” image.

When you create your own button images, remember to make sure everything is in the same spots and shifted the exact amount as the other image! If not, you’ll notice the misalignments when you mouse over the final button.

Step 2. You need to add some CSS to your stylesheet. The following is the CSS I used to make my buttons:

.buttonprev a{
background:url(http://www.plasticshards.com/interfaceparts/images/olderposts.png) repeat 0px 0px;
width: 360px;
height: 50px;
display: block;
}

.buttonprev a span {
display: none;
}

.buttonprev a:hover {
background: url(http://www.plasticshards.com/interfaceparts/images/olderposts.png) repeat 0px -50px;
}
.buttonnext a{
background:url(http://www.plasticshards.com/interfaceparts/images/newerposts.png) repeat 0px 0px;
width: 360px;
height: 50px;
display: block;
}

.buttonnext a span {
display: none;
}

.buttonnext a:hover {
background: url(http://www.plasticshards.com/interfaceparts/images/newerposts.png) repeat 0px -50px;
}

Copy and paste this CSS into your own stylesheet, but change the links to reflect your own button image sets, and adjust the “repeat 0px -50px” for the “a:hover” classes to tell which direction your rollover will shift once hovered over with the mouse. The first number in “repeat” affects horizontal shifting. The second number affects vertical shifting. Since my button images are placed vertically in relation to each other, I used the second number set to -50px to move the image UPWARD 50 pixels once hovered over. [For instance, if my buttons were placed side by side, I'd wanto to set the first number to "350px".]

Step 3. Now that you have the CSS, its time to make the link. Depending on where your theme needs the links, such as in your Main Index Template (index.php), add the following code:

<div class="buttonprev"><?php previous_posts_link('<span> </span>'); ?></div>

<div class="buttonnext"><?php next_posts_link('<span> </span>'); ?></div>

After you add that to the spots you want, load up your page and give it a try! Your rollovers should be working now just like the ones on my blog’s front page.

Enjoy and hope you found this helpful :)

SYNTHESIS Page 005 is up in the comics section! Click the thumbnail to the left to go to the page index.