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タグではなく、タグの属性です。 onmouseoverimgタグの一部である必要があります。その1行を変更すると、次のように軌道に乗ることができます。

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