TD Rollover Image

[NeedScripts]

I understand that I can create a mouseover/out color change for TD by using

<td onmouseover="this.style.background='#EFEFEF'" onmouseout="this.style.background='#FFFFFF'">

However I was wondering if anyone can tell me how can create mouseover/out image change within TD?

NS

[R1chard]

This can be done a little simpler and cleaner with CSS.

td.bgc: hover {background-color: #ffff00}

put that in the stylesheet, and this in the body:

<td class="bgc">cont</td>

You can then replace the color in the stylesheet by {background-image: url(whatever.png)}

This can also work for paragraphs, or <em>, or anything else, which might be better of you're not working with actual tabular data.

[NeedScripts]

hum.. seems like the hover is still not wanting to work..

This is the CSS code I am using

td.test5 {
background-image: url(test-blue.gif);
}

td.test5:hover {
background-image: url(test-green.gif);
}

And I have named the class for td = test5

When I see the td in the browser I see test-blue.gif as the bg color, however, on mouseover, it does not change to text-green.gif :(

Can you tell me where I am doing wrong?

NS

[benihana]

internet explorer, afaik, doesnt do hovers on anything but <a hrefs>
it may well be working properly, but if youre testing in i.e. then you wont see it.

[NeedScripts]

I just tried Opera too.. but without any results :(

NS

[bruhaha]

The problem is that IE can't handle "hover" in this case. But you can work around that by combining your original javascript (mouseover/mouseout)approach with classes.

All you need to do is create TWO classes, e.g., "bgout" and bgover"

.bgout {
background-image: url(test-blue.gif);
}
.bgover {
background-image: url(test-green.gif);
}

Then, inside the cell write:

<td class="bgout"onmouseover="this.className='bgover'" onmouseout="this.className='bgout'">

[NeedScripts]

Man you rock :)

It is working ..

Thanks for everyone for all the help.

NS