Placing text over rollover images?

Light Poster
25Mar2010,02:57   #1
bananow's Avatar
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
Go4Expert Founder
25Mar2010,09:46   #2
shabbir's Avatar
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.
Pro contributor
26Mar2010,00:14   #3
hanleyhansen's Avatar
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';" />
Light Poster
4Apr2010,01:11   #4
bananow's Avatar
Thank you for your replies everyone. With your help I have successfuly solved the problem :-)