Buttons with dynamic content / mouseover/selected effect / interpretation

[Servrox]

Hey guys,

i hope u can help me with html / js / php.
i dunno if the php section is the right one, so feel free to move it to the js section

what i want to do:
2 buttons with mouseover/selected effect. every button got dynamic content out of a db.
if u select one button, the site should check, if it was the right decision and it should change the the button to red or green. after a second click, it should start from the beginning (load new content and so on..)

what is working right now :
- loading the dynamic content out of the db.
- mouseover effect for the buttons

well i could make a <form> for the buttons, to test if the right one was clicked, but this i kinda crappy and after assimilating the form i have to go back to my button site (to show a red or green button), which normally only load dynamic content.

so i thought easiest way is to check with js if the right one was clicked, and change in fact of the result, the button image. so i ony need js to check the php variables and change the button color/image.
problem is, i have no clue how to use js. hope u can help. i will appent some code for the buttons.

greets


my buttons, actually only a table with background images (check css)

<table>
	<tr> 
		<td id="que" colspan="2">
			<?php echo $question; ?>		
		</td>
	</tr>
	<tr>
		<td id="ans">
			<?php echo $ans1; ?>	
		</td>
		<td id="ans">
			<?php echo $ans2; ?>	
		</td>
	</tr>
</table>

table {
	margin-left: auto;
    margin-right: auto;
	vertical-align: middle;
	text-align: center;
}

#ans {
	display:block;
	background-image:url('../img/ans.png');
	width:518px; height:71px;
}

#ans:hover {
	background-image:url('../img/ans_hover.png');
}

#que {
	display:block;
	background-image:url('../img/ques.png');
	width:1044px; height:153px;
	margin-left: auto;
    margin-right: auto;
}

my php files, which loads the content (shouldn't be interestung)

<?php
include 'dbpointer.php';
mysql_select_db($Database, $DatabasePointer);

$sql = "SELECT * FROM bla ORDER BY rand() LIMIT 1";
$qe = mysql_query($sql);
$row = mysql_fetch_object($qe);

$qestion = $row->question;
$ans1 = $row->ans1;
$ans2 = $row->ans2;
?>

[speghettiCode]

I think you could use PHP to dynamically insert the JS code you need.

Here's what I would do...

<table>
	<tr> 
		<td id="que" colspan="2">
			<?php echo $question; ?>		
		</td>
	</tr>
	<tr>
		<td id="ans" <?php echo ($ans1_correct?" onclick=\"this.style.backgroundColor='#0f0';\":""); ?>>
			<?php echo $ans1; ?>	
		</td>
		<td id="ans" <?php echo ($ans2_correct?" onclick=\"this.style.backgroundColor='#0f0';\":""); ?>>
			<?php echo $ans2; ?>	
		</td>
	</tr>
</table>