Navigation bar using images with rollovers

  • Resolved anpu

    (@anpu)


    15 years, 6 months ago

    Hello Everyone,

    Hopefully someone can help with this, I have searched Google and the Forum here but I haven’t seen anything that exactly describes what I am trying to do, perhaps it’s not possible?

    I am setting up a WordPress site at https://www.timdoody.me. And if you were to go to the site you’ll see that I have a header with the site’s name and three symbols next to it. I’d like to use that header image or some other solution positioned in that location as a navigation bar with rollovers. Once a visitor goes over a symbol it’ll rollover and display the rollover state. How can I do that?

    Thank you very much in advance for your help!

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

  • The only way I can think of to do an image rollover is to set the mouseover image as the background of a div or table, and have the non-mouseover image change opacity to 0 when you mouse over it.

    This could get tricky getting the div exactly the right size and placement, but it should do the trick.

    Since it will be anchor links, you can use the :hover selector to change displays (for newer browsers you can use :hover on other elements as well, but those won’t work on IE6 and below).

    A simple tutorial can be found here.

    Peter

    Thread Starter anpu

    (@anpu)

    Hi Guys,

    Thanks for your tips. I am working on it now.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Navigation bar using images with rollovers’ is closed to new replies.