-1

私はすべてのコーディングを行いました。すべてが正常に機能しています。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>
4

1 に答える 1

0

onclick属性で画像をクリックしますか？画像の1つだけがこれを持っています。それが問題になる可能性があると私が見ることができる唯一のことです。

于 2012-05-25T21:44:48.970 に答える