One of the issues that I ran into when porting my websites over to wordpress was the lack of built-in image mouseover capabilities. My previous website used dreamweaver, and had mouseover using javascript built-in. Of course, one simple way to do this would be to copy the javascript over from the old site into the new. However, that’s kind of messy. The javascript was a kludge in the first place and require tricks to preload the images so the mouseover would not be delayed. So, I sought out on the web for the “new way” to do mouseover, and what I found was called CSS sprites. Here is a brief introduction on how CSS sprites work.
Let’s start by making some button images. We’ll need two of them, one for the button’s normal state and the other for the mouseover state. I used a simple paint program to create these two buttons.
This will be our “up” state button. It’s a little darker and has normal text.
This one will be our “down” (or mouseover) button. It has bold text and a lighter color.
Our first step is to combine these images. Individually they are each 80×32 pixels in size. We’ll create a new image that is 160×32 pixels and put the up image on the left half and the down image on the right half. The combined image looks like this:
Let’s start by creating the HTML where our link will go. Rather than using a tradition <img> tag, we’re going to use a <span> tag. Here is the html:
<a class=”smbakerbutton” href=”http://www.smbaker.com”><span>smbaker!</span></a>
As usual, the hyperlink is made with an <a> tag. That should look very normal to everyone. The button itself is going to be displayed in the <span> tag – that’s where things get weird. Where’s the button, you say? Well it goes inside some CSS that we’re going to write.
.smbakerbutton {
display: block;
width: 80px;
height: 32px;
background: url(smbakerbutton_rollover.jpg) no-repeat 0 0;
}
Let’s examing this code in detail. The display: block tells the browser to render this as a block-level element. ‘width’ and ‘height’ are the height of our button (which is one half the width of the double-wide image that we created). The ‘background’ statement says to use our image as a background image. So what this has done is to turn our hyperlink into a 80×32 rectangle with our button image as the background.
Next we need to handle the mouseover state:
.smbakerbutton:hover {
background-position: -80px 0;
}
So what we’ve down is every time the mouse is over the button, we shift the background image 80 pixels…. Well since our image is 160 pixels wide, and the other half of the image is the “down” state of the button, that’s going to cause our button to display the “down” state.
Finally, we don’t want the text in the span tag to be displayed, so we’ll turn off the span’s text output:
.smbakerbutton span {
display: none
}
Here is what our button looks like. You can mouseover it and it should change state:
Here is all of the CSS in one big block:
.smbakerbutton {
display: block;
width: 80px;
height: 32px;
background: url(smbakerbutton_rollover.jpg) no-repeat 0 0;
}
.smbakerbutton:hover {
background-position: -80px 0;
}
.smbakerbutton span {
display: none
}
Remember that the CSS needs to go in your stylesheet, or needs to otherwise end up in the header of the page. Putting the CSS in the body of a wordpress post won’t work. I’ll tell you a way to get around that in the next blog entry!
