cell background rollover can't find object?

Forum Moderators: open

Message Too Old, No Replies

cell background rollover can't find object?

blah45

2:59 am on Sep 1, 2004 (gmt 0)

I'm trying to get the background image of a table cell to change/rollover when you mouse over a link. This code works in IE, but in Firefox/Mozilla/Netscape it says that it can't find the object "changebg", so is there another way to pass the object's name?

I know this can be done by calling onmouseover/out from the TD tag but I have to get it working from a link (there will be multiple links each with a different rollover image in the TD).

The sample webpage:
[cuberis.com ]

Code:


<html> 
<head> 
<title>Change Test</title> 
<style type="text/css"> 
td.image { 
background: url(intside1.jpg); 
} 
td.image2 { 
background: url(intside2.jpg); 
} 
</style> 
</head> <body> 
<table width="100" height="100"> 
<tr> 
<td id="changebg" name="changebg">
<a href="#" onmouseover="changebg.className='image2'" onmouseout="changebg.className='image'">Change</a>
</td> 
</tr> 
</table> 
</body> 
</html>

Thanks!

birdbrain

3:51 am on Sep 1, 2004 (gmt 0)

Hi there blah45,

and a warm welcome to these forums ;)

Try using document.getElementById like this...


<html>
<head>
<title>Change Test</title>
<style type="text/css">
td.image {
background: url(intside1.jpg);
}
td.image2 {
background: url(intside2.jpg);
}
</style>
</head>
<body>
<table width="100" height="100">
<tr>
<td id="changebg" class="image">
<a href="#" onmouseover="document.getElementById('changebg').className='image2'" onmouseout="document.getElementById('changebg').className='image'">Change</a>
</td>
</tr>
</table>
</body>
</html>

birdbrain

Bernard Marx

7:04 am on Sep 1, 2004 (gmt 0)

Yup. Using the id alone is IE-only.
If the link remains in the same position, structurally, then you could use this more general reference chain (maybe you're using this in a number of cells)

onmousover="this.parentElement.className='image'" ...