Table background change using Javascript

CRA · 12-11-2006, 02:23 AM

Hi there, I'm trying to make a javascript menu. As a start, I want the background of the cell to change to a specific image on mouseOver. Does it not work because of the "background-image" translation from CSS to JAVASCRIPT or could it be something else. Thank you.

Code:

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="main.css" />
<script language="javascript">
function change() 
{
		document.getElementById("homebtn").style.backgroundImage="imgs/btn_black2.gif">;
}
</script>

</head>
<body>

<table width="100" >
		<td>
				<tr style="background-image:url(imgs/btn_black.gif)" class="myFont" onMouseOver="change()" id="homebtn">- Home</tr>
				<tr>asdfsdf</tr>
				<tr>asdfsdf</tr>
		
		</td>
</table>
</body>
</html>

Kor · 12-11-2006, 06:45 AM

Yes, the syntax was incorrect. should be

Code:

document.getElementById('homebtn').style.backgroundImage='url(imgs/btn_black2.gif)'

But the worst thing is that you have switched the HTML code in your table. The rows are nesting the cells, not inverse. It should be:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

And you may also use the this self reference, and shorten the code:

Code:

<td style="background-image:url(imgs/btn_black.gif)" class="myFont" onmouseover="this.style.backgroundImage='url(imgs/btn_black2.gif)'" id="homebtn">- Home</td>