I have created a chess board in php, and put the chess piece according to their order. Everything is working, but I cannot change the color of the king piece when I point the mouse on it and I have to use javascript to prompt a message to user on the details of the chess when the user clicks any of the piece of the chess, here I have to use javaScript to do it. Is there any suggestion, how should I approach. Please refer to my coding below, what should I change or add to get it working.
<html>
<head>
<style>
th{
width:80px;
height:80px;
}
table{
border: 5px solid #FFBB78;
border-collapse:collapse;
}
td{
width:80px;
height:80px;
}
tr{
width:80px;
height:80px;
}
h1{
color:#6633FF;
}
</style>
<script type="text/javascript">
function changeColor(){
document.getElementById("king").style.backgroundColor="yellow";//this image has to change color.
}
</script>
</head>
<body>
<?php
$pictures = array(
//row 1
"1,1" => '<img src="chess/br.gif" />',
"1,3" => '<img src="chess/bb.gif"/>',
"1,4" => '<img src="chess/bq.gif"/>',
"1,5" => '<img src="chess/bk.gif"/>',
"1,8" => '<img src="chess/br.gif"/>',
//row 2
"2,1" => '<img src="chess/bp.gif"/>',
"2,2" => '<img src="chess/bp.gif"/>',
"2,3" => '<img src="chess/bp.gif"/>',
"2,4" => '<img src="chess/bp.gif"/>',
"2,5" => '<img src="chess/bb.gif"/>',
"2,6" => '<img src="chess/bp.gif"/>',
"2,7" => '<img src="chess/bp.gif"/>',
"2,8" => '<img src="chess/bp.gif"/>',
//row 3
"3,3" => '<img src="chess/bn.gif"/>',
"3,6" => '<img src="chess/bn.gif"/>',
//row 4
"4,5" => '<img src="chess/bp.gif"/>',
//row 5
"5,3" => '<img src="chess/wb.gif"/>',
"5,5" => '<img src="chess/wp.gif"/>',
//row 6
"6,4" => '<img src="chess/wp.gif"/>',
"6,6" => '<img src="chess/wn.gif"/>',
//row 7
"7,1" => '<img src="chess/wp.gif"/>',
"7,2" => '<img src="chess/wp.gif"/>',
"7,3" => '<img src="chess/wp.gif"/>',
"7,6" => '<img src="chess/wp.gif"/>',
"7,7" => '<img src="chess/wp.gif"/>',
"7,8" => '<img src="chess/wp.gif"/>',
//row 8
"8,1" => '<img src="chess/wr.gif"/>',//this are the chess piece that has to prompt out chess piece details
"8,2" => '<img src="chess/wn.gif"/>',
"8,3" => '<img src="chess/wb.gif"/>',
"8,4" => '<img src="chess/wq.gif"/>',
"8,6" => '<img src="chess/wr.gif"/>',
"8,7" => '<img src="chess/wk.gif"/";);//this image has to change color.//array ends here
echo"<h1 align='center'>SAJID Chess Board</h1>";
echo"<table border='1' align='center'>";
for($i = 1; $i <= 8; $i++){
echo "<tr>";
for($j = 1; $j <=8; $j++){
if( ($i+$j)%2==0 ) {
echo"<td bgcolor='#99FF99'>";
}
else {
echo"<td bgcolor='#9999CC'>";
}
if(isset($pictures["{$i},{$j}"]))//compares the pictures i and p
echo $pictures["{$i},{$j}"];
echo "</td>";
}
echo "</tr>";
}
echo "</table>";
?>
</body>
</html>
onmouseoverisn’t a tag, it’s an attribute for a tag.onmouseoverneeds to be a part of the img tag. Changing that one line will get you on track, like this: