[SOLVED] CSS: Remote Rollover?

49Monsters · #1 Dec 21, 2010, 07:23 PM

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:

HTML Code:

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

CSS:

HTML Code:

#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