Placing text over rollover images?

bananow's Avatar, Join Date: Mar 2010
Light Poster
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
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
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.
hanleyhansen's Avatar, Join Date: Jan 2008
Pro contributor
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';" />
bananow's Avatar, Join Date: Mar 2010
Light Poster
Thank you for your replies everyone. With your help I have successfuly solved the problem :-)