Today, I had a need to create a hover state for a button. I knew how to do that easily if it were an image. I could just use the onMouseOver attribute and insert a little javascript to swap out the image on hover.

That doesn’t work for input field.

I thought about using javascript, but that feels like an overkill and whenever possible, I try to avoid writing script.

Then I came across the following tutorial on applying a sprite technique to the input field.

It’s a really easy to follow tutorial. I got it working in less than 30 minutes. If you want to learn about this technique, you should give this one a try.

This entry was posted on Tuesday, October 20th, 2009 at 9:27 am and is filed under DHTML, tips and tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.