I'm trying to code a remote roll-over with a Spite Button in my side bar. I want to roll over the button, the button goes to hover state and an image pops up elsewhere in the side bar. I know I have been close and have found the prefect example, (I SHOULD be able to get it with the example but...)http://www.onextrapixel.com/2009/05/...t-remote-area/ I keep getting confused when I try to plug in my info.

I think where I keep getting lost is because my code for the (sprite) button is different than in the example. If someone could just plug in the right code, in the right spot, I know it will sink in! I have several I want to do, once I get my head around this first one.
Here is my (sprite) button, which works as I want:
HTML in text widget:

<a id="Trip_2" href="http://localhost/" title="Home">
	<span>Trip Channel</span></a>

CSS:

#Trip_2
{
z-index: 4; position: top center; width: auto; 
margin-right: 0px; 
margin-left: 0px;
margin-top: 10px;
margin-bottom: 0px;
  display: block;
  width: 200px;
  height: 25px;
  background: url("./wp-content/themes/atahualpa353/images/Trip_2.jpg") no-repeat 0 0;
}

#Trip_2:hover
{ 
  background-position: 0 -25px;
}

#Trip_2 span
{
  display: none;
}

I have a 100px x 100px image named "RemoteImage_1" that I want to place about 30px below the button. I do not plan to have type as well as an image as in the example.

Thanks for the help!
Guy

This has nothing to do with atahualpa, but looks like a cool idea, so...

You need to have the image defined in the HTML. Go back and look at the example, they have the <a....> with a number of <span...>'s. Inside the <a>, one of the span's has the class 'icon'. It has a normal state of 'display:none' but on hover it is changed to 'display:block'. That is what makes it show up.

So it has to be in the HTML, have a normal state of 'display:none' and a hover state of 'display:block'

OK JD, thanks
I'll give it another shot.
In the example code, what is this for?

#menu1 li a .button, #menu2 li a .button {
    background:transparent url(images/button.jpg) no-repeat top right;
    display:inline;
    float:left;
    height:21px;
    padding:10px 10px 0 0;
    margin-left:12px;
    cursor:pointer;
}

Is that just the word "Home" inside the button?

That's the CSS Selectors (everything before the '{') and the CSS rules. There are two selectors, short hand, so the rules will apply to both. In english it says:

For andy element with a class of 'button' that is a child of an <a> in a <li> that is a child of the element with an ID of 'menu1' or 'menu2' apply these rules.

If you look at the HTML, in the example, it applies to 'Home', 'About Us', 'Services', 'Portfolio' and 'Contact Us' since they all meet the conditions of the selectors.

However it doesn't apply to 'Back to homepage' etc, because they have a class of 'text' not 'button' which the CSS selectors are using.

if you changed the selectors to '#menu1 li a, #menu2 li a {' (i removed '.button') then it would apply to all of them.

Thanks JD
I should have been more clear with my question.
I realize that it's selectors/rules. I just was not sure what it was controlling. It was just the words in the buttons, so I did not need it for my example.

The good news is I GOT IT! In my use, I actually use FOUR images. The first two are the button (so to speak)... instead of a button changing from white to green as in the example, I have an image that changes views, then two additional "remote images. I still need to play with placement and I'm on a local server right now, but once I get it tweaked I'll bring it over to a live site and show you. Cool stuff!

Thanks JD
Guy