[SOLVED] getElementById problem

[rascle]

Hi

i am trying to create something that when you hover over some text then the div changes colour. I am using php to get the data from a mysql table and then javascript to change the div backgroundcolor when it is hovered over. Here is the main code in the body:

<?php
$games = mysql_query("SELECT * FROM `games`");
while ($rows = mysql_fetch_array($games)) { 
echo "<div id='game".$rows['gamenumb']."'style='background-color: #333333;width: 750; '><a href='http://www.rasclerhys.com/playgames.php?id=".$rows['gamenumb']."' ><img src='".$rows['picture']."' border='0' width='70' height='59'></a>
<a href='http://www.rasclerhys.com/playgames.php?id=".$rows['gamenumb']."' onMouseOver='javascript:changeBG(0,game".$rows['gamenumb'].")' onMouseOut='javascript:changeBG(1,game".$rows['gamenumb'].")'>".$row['text']."</a></div><br />";}
?>

Here is the javascript code in the head:

<script language="Javascript">
<!--

var backColor = new Array();
backColor[0] = '#666666';
backColor[1] = '#333333';

function changeBG(whichColor,gameid){
document.getElementById(gameid).style.backgroundColor = backColor[whichColor];
}

//-->
</script>

The data is being displayed fine, but when i hover over the link the background color (of the div) does not change,

does anybody know how to correct this???

Thanks in advance

[JonnoTheDev]

Yes, dont use javascript, use CSS

// css document
div.game:hover { background-color: #FF0000; }

 

<div class="game">Game 1</div>
<div class="game">Game 2</div>

[haku]

What he said.

 

As a side point, in the future show us the output of the php, not the php itself. The php is irrelevant, all that is relevant is the output of the php script.

[rascle]

yes but i need to use javascript because later on i want to add a feature that when you hover over the link aswell as the background div changing, some other text (previously hidden) appears. is there a way to get the code above to work(from the first post)?

[rascle]

Also i am using php to get the info from the database and since it is being constantly updated i would have to manually add hundreds of lines of

div.game1.hover

div.game2.hover

div.game3.hover

etc

since u cant have a while loop in css... right?

 

[rascle]

Solved, i just added some quotes to "onMouseOver="javascript: changeBG(0,'game1')" "