1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Placing text over rollover images?

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

  1. bananow

    bananow New Member

    Joined:
    Mar 24, 2010
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    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,

    Tomas
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
    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

    Joined:
    Jan 24, 2008
    Messages:
    336
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Drupal Developer/LAMP Developer
    Location:
    Clifton
    Home Page:
    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:

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

    bananow New Member

    Joined:
    Mar 24, 2010
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    Thank you for your replies everyone. With your help I have successfuly solved the problem :)
     

Share This Page