I have a website that uses image rollovers. The background imagess in each cell of a table have a Hover image that is the same but darker and with text in it.

I am trying to simplify the website so future webmasters (or me) will be able to change the hover text without the need of Photoshop.

The ideal method that would work would be to have the background cell image loaded by CSS and then have a hover layer for Text which would be in the HTML file. The text would have an Opacity so that the background image would appear darker.

Browser use is static. I have no worries of NN, mozilla, Opera compatibility.
The following is something I found online. I have not been able to get the background image to show.

I was hoping CSS could load the images instead of having the img src= in the html code. A lot of this is letter for letter but I was hoping at least the image would show.

.descr {
	position: relative;
	font-family: arial, verdana, helvetica, sans-serif;
	background-image: url(/images/picture.jpg);
	background-repeat: no-repeat;
	width: 181px;
	height: 122px;
	margin: 0;
	margin-bottom: 0px;
	padding:0;

}
.descr a {
display: block;
font-size: 14px;
width: 161px;
height: 101px;
display: block;
margin: 0;
padding: 0;
color: white;
text-decoration: none;
}
.descr img {width: 100%; height: 100%; border: 0; }
.discr a:hover {visibility: hidden}
.descr a:hover img {visibility: visible}

Not sure if this will help but the image url has to be relative to your stylesheet.

Originally Posted by kizzybell

Not sure if this will help but the image url has to be relative to your stylesheet.

The code is in a CSS file not inline.

hi again

yep - that's what i meant.

for example, if your stylesheet is in a folder called styles, and your images are in a folder called images, you need to go up the folder structure from the styles folder

here's some code to show what i mean!

background-image: url(../images/picture.jpg);

the link will now look up your folder structure into the images folder.

give a go and see if it works!

I'm sorry to say that it does not work.

the css file in the root as well as the images folder. I have even gone as far as to putting a copy of the picture in the root and changed the css line to

background-image: url(picture.jpg);

just fyi, the html goes like:

<td><div class="descr"><a href="#">blah</a></div></td>

On doing a google search, I found that a similar thread occured about 3 months ago and the problem was solved as you described.

ok, for some reason id= works instead of class=. Though I have read the definition in book and online I still do not undrstand why that changed the situation. Anyway, the image now shows in IE.

------------------------------

Second issue.

Now that I have CSS loading the image, I need text that I have entered in the HTML file to stay hidden until a mouseover. The text area would also have an opacity.

I can hide the text with an inline visibility statement but that seems to prevent anything in the CSS file from appearing.