我已经完成了所有的编码,一切正常。只停留在javascript中。我可以更改图像背景的颜色。但是,单击图像时无法提示弹出消息,我尝试使用“onclick”。但它仍然不起作用。
任何人都可以给我建议或工作示例。请在下面查看我的编码-
<html>
<head>
<style>
th{
width:60px;
height:60px;
}
table{
border: 5px solid #FFBB78;
border-collapse:collapse;
}
td{
width:60px;
height:60px;
}
tr{
width:60px;
height:60px;
}
h1{
color:#6633FF;
}
</style>
<script type="text/javascript">
function changeColor(){
document.getElementById("king").style.backgroundColor="black";
}
function click(){
/*var pawn = document.write.getElementById('pawn');
var knight = document.write.getElementById('knight');
var queen = document.write.getElementById('queen');
var bishop = document.write.getElementById('bishop');
var king = document.write.getElementById('king_1');
var square = document.write.getElementById('sqaure');*/
alert("This is a knight");
}
/*function promt_chess_piece(){
//var knight = document.write.getElementById('knight');
if (knight.value.lenght)
{
alert("This is the knight");
knight.focus();
return true;
}
}*/
</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" onclick="click()"/>',
"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"/>',
"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" onmouseover="changeColor()" id="king" />',);//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>