Background image rollovers

[virtualoverride]

I have a menu of buttons which is basically like this:<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td background="menu/1.gif">home</td>
</tr>
<tr>
<td background="menu/2.gif">events</td>
</tr>
</table>I won't bother including the full code since it's not needed for this problem.

I have a table of buttons which are simply text placed upon a background image. I would like to have a rollover effect on the buttons--but Netscape does not support the "background" attribute of a <td> in JavaScript. It displays the table with the background images just fine, but I cannot change them via JavaScript (and after checking the W3C specifications, the JavaScript object technically does not have that background attribute anyway--IE apparently just includes it as an extra.)

So is there any way to put a background image behind some text, and change the image for rollovers via JavaScript?
I need cross-browser compatibility here.

Thank you!

[khalidali63]

Your code seem to work in NS6+ and Mozilla 1+ browsers.Is your concern about NS4+ browsers?

[virtualoverride]

Yes, the table displays fine in all browsers. But the rollovers do not seem to work. I didn't give all the code before...

I have attached a zip file with a test page and some images (I didn't want to include the actual page and images--so I made simple ones to test with); it shows what I am trying to do. It works in Internet Explorer but not in Netscape. If someone can figure out how to make it work in Netscape, please tell me!

Here is a copy of the code in the zip file:<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td id='btn1' background="menu/1.gif">
<a href='home.html'
onmouseover="menuon('1');"
onmouseout="menuoff('1');">home</a>
</td>
</tr>
<tr>
<td id='btn2' background="menu/2.gif">
<a href='home.html'
onmouseover="menuon('2');"
onmouseout="menuoff('2');">events</a>
</td>
</tr>
</table>

<script language="JavaScript">
function menuon(num) {
if(document.all) {
eval('document.all.btn' + num).background =
'menu/' + num + '-on.gif';
}
else if(document.getElementById) {
document.getElementById('btn' + num).background =
'menu/' + num + '-on.gif';
}
}

function menuoff(num) {
if(document.all) {
eval('document.all.btn' + num).background =
'menu/' + num + '.gif';
}
else if(document.getElementById) {
document.getElementById('btn' + num).background =
'menu/' + num + '.gif';
}
}
</script>

[khalidali63]

I have fixed your code entirely for both IE and NS6+ or Mozilla1+ browsers.
the td tag does not have a legal background attribute, we all know why it works in IE.
NE ways njoy

cheers

Khalid

[virtualoverride]

Thank you very much!