"Double" Image (2-in-1)

[Joshua4550]

Hey guys,

 

Just a quick question - If I had a button, say 200px.. but it had 2 similar images on it, for eg: 2 buttons, the first 100px height would be one button, then the next 100px of height would be the same button, but lighter (for hovor-over effects)

 

Is there an easy way to use this as one image, and have it so when you hovor over, it shows the bottom 100px - otherwise it shows the top 100px?

 

Thanks in advance!

[Joshua4550]

Figured it.

 

For anyone wanting the same thing:

 

<style type="text/css">
div.button {
background:url(/imgs/button.gif) no-repeat 0 0;
width:200px;
height:100px;
}
div.button:hover {
background-position:0 -100px;
}
</style>

<div class="button"></div>

(button.gif is 200x200 px)