The Blog of Josh Stodola

I am a huge fan of CSS sprites, a technique used to create image-based hover effects on a web page. It's clever and very efficient because both "image states" are contained in a single image, eliminating the need to make two requests to the server. It tends to go hand-in-hand with image replacement to create an appealing effect while retaining accessibility and search engine optimization. Having to use background images sort of limits the flexibility to an extent. I realized this when I wanted to use sprites with the <input type="image" /> tag for submitting a form. Since this tag sets the path to the image as an attribute, the classic method of applying sprites with background images cannot be used. The same challenge is presented with the <img> tag. There are alternative routes, such as using two separate images and wiring up some Javascript to pre-load the hover image and change the SRC attribute of the input tag onmouseover. But, since I love sprites so much, I wanted to try and make it happen that way. It's not overly difficult nor complex, but I thought I would make a post out of it anyways. For an example, I will be using the following image as the sprite…

The plan is to make the top half of the image visible by default. When the mouse hovers over it, the bottom half should show (this could be vice-versa very easily). I'm assuming you understand the concept behind sprites, so I won't waste any more time explaining their structure and benefits. It's worth mentioning that the dimensions of the image above ar 200x80. To make this work, an extra <div> will be needed…

<div id="submitButton">
  <input type="image" src="submit.png" alt="Submit Form" />
</div>

Since the <div> is a container for the image, we can set a specific height and hide the overflow so that the default state of our image (the top) is the only thing showing…

#submitButton {
  cursor:pointer;       /* Give it the hand cursor, like a link */
  height:40px;          /* Image has a height of 80px, only show the first half */
  overflow:hidden;      /* Hide the overflow */
  width:200px;          /* Width of the image */
}

After that, setting the image to display the other half when moused over is as easy as adding a negative top-margin on the :hover pseudo-element of the <div>…

#submitButton:hover input {
  margin-top:-40px;    /* Negative height of half the sprite, to push the image up */
}

And that is all there is to it! I have tried this in IE7, Firefox 2, Opera 9, and Safari and it worked just fine. IE6 did not produce a hover effect, but it degrades gracefully by just showing the top half. If you discover a browser that causes abnormal results, please enlighten me and the future readers of this post by posting a comment. I've setup a live demo and a ZIP file for you to download.

• View Demo
• Download the Code

Have fun!