REMOTE Rollover

  • 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 else in the side bar. I know I have been close and have found examples but I keep getting myself confused…

    If someone could just plug in the right code, in the right spot, I know it will sink in! ??

    Here is my (sprite) button, which works as I want:
    HTML in text widget:

    <a id="Trip_2" href="https://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 want to have an image (RemoteImage_1) appear below the button on hover. I think I need to use

      but I keep losing myself on what goes where. I’m still a rookie.

    margin-top: 30px;
width: 100px;
height: 100px;
background: url("./wp-content/themes/atahualpa353/images/RemoteImage_1.png") no-repeat 0 0;

    Thanks
    GB

Viewing 3 replies - 1 through 3 (of 3 total)
  • Purab

    (@wordpressapi)

    Just try following code. This will solve your issue.

    margin-top: 30px;
width: 100px;
height: 100px;
background: url("images/RemoteImage_1.png") no-repeat 0 0;

    If you are still facing issue then write to me at [email address removed]

    Thread Starter 49monsters

    (@49monsters)

    Wpapi
    Thanks for the reply.

    I need the code for “How to make the remote image (in this case “RemoteImage_1″) show on hover”, and how does that code fit in with the code I already have for my button. Most of the examples I’v seen use a

      ?

    That last chuck of code I listed in my post was just the size/placement of my remote image.

    I was really hoping someone could take my existing coded button (Trip_2) add in code for the remote image (RemoteImage_1) on hover, so I could see the entire code and then replicate it for a number of other links in my site.

    I sent this to you in email as well…
    Thanks
    GB

    Thread Starter 49monsters

    (@49monsters)

    That should say “Most examples I’ve seen use a “ul” ?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘REMOTE Rollover’ is closed to new replies.