0

我在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>
4

1 回答 1

3

onmouseover不是标签，它是标签的属性。 onmouseover必须是 img 标签的一部分。更改这一行将使您步入正轨，如下所示：

"8,7" => '<img src="chess/wk.gif" onmouseover="changeColor()" id="king" />',);//array ends here
于 2012-05-25T14:45:01.937 回答