1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Placing text over rollover images?

Discussion in 'Web Design, HTML And CSS Forums' started by bananow, Mar 24, 2010.

  1. bananow

    bananow New Member

    Hello everyone,
    I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT?
    Thank you for your replies,

  2. shabbir

    shabbir Administrator Staff Member

    What others have told you absolutely right and having a background image and a different hover background image will do what you want to achieve.
  3. hanleyhansen

    hanleyhansen New Member

    In HTML/CSS you can do something like this:

    Have two instances of the image, one with what you want it to look like regularly (name it image1) and one with how you want it to look like when you roll over it (name it image2). Then you can use this code to make the changes:

    <img src="image1.png" onmouseover="this.src=image2.png';" onmouseout="this.src='image1.png';" />
  4. bananow

    bananow New Member

    Thank you for your replies everyone. With your help I have successfuly solved the problem :)

Share This Page