JavaScript and php, malfunction with the array image

Question

I have created a chess board in php, and put the chess piece according to their order. Everything is working, but I cannot change the color of the king piece when I point the mouse on it and I have to use javascript to prompt a message to user on the details of the chess when the user clicks any of the piece of the chess, here I have to use javaScript to do it. Is there any suggestion, how should I approach. Please refer to my coding below, what should I change or add to get it working.

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

onmouseover isn't a tag.

Cfreak
– Cfreak

2012-05-25 14:43:19 +00:00
Commented May 25, 2012 at 14:43 — Cfreak
– Cfreak, Commented May 25, 2012 at 14:43

Surreal Dreams · Accepted Answer · 2012-05-25 14:45:01Z

3

onmouseover isn't a tag, it's an attribute for a tag. onmouseover needs to be a part of the img tag. Changing that one line will get you on track, like this:

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

answered May 25, 2012 at 14:45

Surreal Dreams

26.5k4 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bleach64 Over a year ago

ooooo, yeaahhhh! Thansks Surreal.. only for 1 line I was sitting more than an hour.. thank you soo much

user1299518 Over a year ago

perhaps you need also to include jquery and move onmouseover into jquery events, based on this question; what about other pieces or even empty squares? just give a class to all pieces/squares and change from there.

Surreal Dreams Over a year ago

Glad I could help. @vlzvl makes an excellent point - jQuery will let you write "unobtrusive" JavaScript, so your PHP can output the HTML and your JavaScript can stay separate in it's own file. jQuery will also let you easily target different board squares (ie, by color) or squares containing certain pieces, no matter where that piece gets moved. It adds a lot of power to your code - it's how I wish JavaScript was written to begin with.

bleach64 Over a year ago

Mr Surreal, can you just do 1 more favour, how do I prompt message, I am using a function and variable, for example when I click on the KNIGHT piece, it will prompt a message saying that it is a KNIGHT

Surreal Dreams Over a year ago

You can accomplish this with the alert() function. Here's a brief tutorial on the subject.

Collectives™ on Stack Overflow

JavaScript and php, malfunction with the array image

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related