Background Image Rollover

What works best?

[le_gber]

Hi,

I've just created a table with 5 background images for the 5 cells.

I've got text in a table within so it looks as if both were the same thing.

I added:
<td background="myimage1.jpg" onMouseOver="background='myimage2.jpg'" onMouseOut="backround='myimage1.jpg'">My other table</td>

This is working fine in IE6 but not in Opera.05 or Netscape 4.78 (yes I know I should upgrade but I like it because it's the 1st one I ever used ;) ).

Does anyone know a better way of doing it?

Thanks

Leo

ps. The reason I did it that way is because I originally added text to it and when I exported it as a .jpg it weighted more that twice the size with unsharp text, when I exported as a .gif the picture was unclear and still twice the size.

[RonPK]

I don't think such advanced things can be done by a browser that was released back in 1997 ;)

For Opera 7 and Mozilla 1.x you can use CSS:

td#cellOne:hover {
 background-image: url(myimage2.jpg);
}

and add an id to the table cell, leaving the JavaScript as it is:

<td background="myimage1.jpg" 
id="cellOne"
onMouseOver="background='myimage2.jpg'" 
onMouseOut="backround='myimage1.jpg'">

[ShawnR]

Agree with Ron, NN4.x doesn't support the mouseover event.