CSS Image Hover in 1 Image File

How can I make this to hover. This is just 1 file, I think it uses javascript, but I also think that it's possible in CSS only...

This is the image used



and the sample website is:

http://www.themaninblue.com/

Notice that the search botton changes it's image as it hover. I have copied the image, and I have found out that it only uses 1 file with 2 buttons. How did he do it? I know to do it, but in separate image files. But when the 2 images are merged in one, I don't know how to

 

Its simple. The image you've shown is of 34 pixels. At first we'll define height: 17px; and on the hover property we shall define margin-top: -17px; That should do the trick .

 

<span class="submit"><input class="image" type="image" src="/images/button_search.gif" alt="Submit search" title="Submit search" /></span>

He adds this into css:

span.submit:hover {
background-image: url(path/button_search2.gif);
}

That's how it can be done.

 

Read the post carefully. It says that he needs to know how to do it with 1 image and not 2 images.

 

thanks Felu... you got my point.. . I know how to do it dmi, but the trick when two images are saved in 1 image file is what i'm trying to ask. But thanks for the reply