我在php中创建了一个棋盘，并按照他们的顺序放置棋子。一切正常，但是当我将鼠标指向国王棋子时，我无法更改它的颜色，并且当用户单击任何棋子时，我必须使用 javascript 向用户提示有关棋子详细信息的消息, 在这里我必须使用 javaScript 来完成它。有什么建议，我应该如何处理。请引用下面的代码，我应该更改或添加什么才能使其正常工作。
<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>
最佳答案
onmouseover 不是标签，它是标签的属性。 onmouseover 需要成为 img 标签的一部分。改变这一行会让你走上正轨，就像这样:
"8,7" => '<img src="chess/wk.gif" onmouseover="changeColor()" id="king" />',);//array ends here
关于php - JavaScript 和 php，数组图像出现故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10756429/