title: PHP chess board cannot put the image inside the board
body: <p>I have success fully coded the chess board and the pictures. But, instead of multidimensional array, I need to insert the chess piece pictures using 'if' statement, inside the for loop instead of array. Whenever I try it, it doesn't work and all them messes out. Can anyone one help me out and suggest me what to do. Please see my coding below.</p>
  
  <pre><code>&lt;html&gt; 
  &lt;head&gt; 
  &lt;style&gt; 
  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; 
  }
  
  &lt;/style&gt; 
  
  &lt;script type="text/javascript"&gt; 
  function changeColor(){
      document.getElementById("king").style.backgroundColor="#666699";
   }
  
   function knight(){
      var msg = "This is the Knight";
      alert(msg);
   }
  
   function king(){
      var msg = "This is the King";
      alert(msg);
   }
  
   function pawn(){
      var msg = "This is the Pawn";
      alert(msg); 
   }
  
   function bishop(){
      var msg = "This is the Bishop";
      alert(msg);   
   }
  
   function rook(){
      var msg = "This is the Rook";
      alert(msg);    
   }
  
   function queen(){
       var msg = "This is the Queen";
       alert(msg);   
   }
  
  &lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  &lt;?php 
  
  /*$pictures = array( //Multi-dimensional array starts here
      //row 1/column 1
      "1,1" =&gt; '&lt;img src="chess/br.gif" onclick="rook()"/&gt;',  
      "1,3" =&gt; '&lt;img src="chess/bb.gif" onclick="bishop()"/&gt;', 
      "1,4" =&gt; '&lt;img src="chess/bq.gif" onclick="queen()"/&gt;',
      "1,5" =&gt; '&lt;img src="chess/bk.gif" onclick="king()" /&gt;',
      "1,8" =&gt; '&lt;img src="chess/br.gif" onclick="rook()"/&gt;',
  
      //row 2 column 2
      "2,1" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;', 
      "2,2" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;', 
      "2,3" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;', 
      "2,4" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;', 
      "2,5" =&gt; '&lt;img src="chess/bb.gif" onclick="bishop()"/&gt;', 
      "2,6" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;', 
      "2,7" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;', 
      "2,8" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;',
  
      //row 3 column3
      "3,3" =&gt; '&lt;img src="chess/bn.gif"  onclick="knight()"/&gt;',
      "3,6" =&gt; '&lt;img src="chess/bn.gif"  onclick="knight()" /&gt;',
  
      //row 4 column4
      "4,5" =&gt; '&lt;img src="chess/bp.gif" onclick="pawn()"/&gt;',
  
      //row 5 column 5
      "5,3" =&gt; '&lt;img src="chess/wb.gif" onclick="bishop()"/&gt;',
      "5,5" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
  
      //row 6 column 6
      "6,4" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
      "6,6" =&gt; '&lt;img src="chess/wn.gif" onclick="knight()"/&gt;',
  
      //row 7 column 7
      "7,1" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
      "7,2" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
      "7,3" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
      "7,6" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
      "7,7" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
      "7,8" =&gt; '&lt;img src="chess/wp.gif" onclick="pawn()"/&gt;',
  
      //row 8 column 8
      "8,1" =&gt; '&lt;img src="chess/wr.gif" onclick="rook()"/&gt;',
      "8,2" =&gt; '&lt;img src="chess/wn.gif" onclick="knight()"/&gt;',
      "8,3" =&gt; '&lt;img src="chess/wb.gif" onclick="bishop()"/&gt;',
      "8,4" =&gt; '&lt;img src="chess/wq.gif" onclick="queen()"/&gt;',
      "8,6" =&gt; '&lt;img src="chess/wr.gif" onclick="rook()"/&gt;',
      "8,7" =&gt; '&lt;img src="chess/wk.gif" onmouseover="changeColor()" id="king" onclick="king()"/&gt;',);//array ends here*/
  
      echo"&lt;h1 align='center'&gt;SAJID Chess Board&lt;/h1&gt;"; 
      echo"&lt;table border='1' align='center'&gt;"; 
  
       for($i = 1; $i &lt;= 8; $i++){ //loop starts here and sequently creates sqares     
            echo "&lt;tr&gt;"; 
       for($j = 1; $j &lt;=8; $j++){ 
            if( ($i+$j)%2==0 ) {// since i and j will create the same sqaures throughout the loop, so I add it up without writting another loop 
  
                  echo"&lt;td bgcolor='#FF9933'&gt;"; //color names are taken from www.w3schools.com html color picker
                } 
              else { 
                  echo"&lt;td bgcolor='#FFFF66'&gt;"; 
              } 
  
  
            if(isset($pictures["{$i},{$j}"]))//Determine if a picture variable is set and is not NULL 
                  echo $pictures["{$i},{$j}"]; //prints out the chess piece pictures
  
                  echo "&lt;/td&gt;"; 
                  } 
                  echo "&lt;/tr&gt;"; 
                  } //loop ends here
  
                  echo "&lt;/table&gt;"; 
  
  ?&gt; 
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>