...

View Full Version : Table background change using Javascript



CRA
12-11-2006, 03: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.




<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, 07:45 AM
Yes, the syntax was incorrect. should be


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:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum