2012-05-25 3 views
0

Я создал шахматную доску в php и поместил шахматный кусок в соответствии с их порядком. Все работает, но я не могу изменить цвет части короля, когда я нажимаю на нее мышь, и я должен использовать javascript, чтобы вывести сообщение пользователю о деталях шахмат, когда пользователь нажимает любой из частей шахмат , здесь я должен использовать javaScript для этого. Есть ли какие-либо предложения, как мне подойти. Пожалуйста, обратитесь к моему кодированию ниже, что я должен изменить или добавить, чтобы заставить его работать.JavaScript и php, неисправность с изображением массива

<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> 
+0

onmouseover - это не тег. – Cfreak

ответ

3

onmouseover не тег, это атрибут для тега. onmouseover должен быть частью тега img. Изменение этой линии приведет вас к следующему этапу:

"8,7" => '<img src="chess/wk.gif" onmouseover="changeColor()" id="king" />',);//array ends here 
+0

ooooo, yeaahhhh! Thansks Surreal .. только для 1 линии я сидел больше часа .. спасибо вам много чего – bleach64

+0

, возможно, вам также нужно включить jquery и переместить onmouseover в jquery-события на основе этого вопроса; как насчет других предметов или даже пустых квадратов? просто дайте класс всем кускам/квадратам и измените оттуда. –

+0

o, спасибо за совет. :-) – bleach64

Смежные вопросы