根据数据库更改页面上的图像

getseats.php contains the return, if a seat's status is 0 the clickable icon should be changed to unavailable from available, having difficulty achieving this! Any help or advice would be greatly appreciated! Ive shown my code below:

    <?php
 $noerrors=dbconnect();
 if($noerrors <> 0) {
  echo '{"errorcode":"'.$noerrors.'"}';
 } else {
  $query = "select seatnum from seats where status='0'";
  $link = mysql_query($query);
  if (!$link) {
   echo '{"errorcode":"3"}';
  } else {
   $rows = array();
   while($r = mysql_fetch_assoc($link)) {
    $rows[] = $r;
   }
   $json=json_encode($rows);  
   echo $json;
  }
 }
 function dbconnect(){
  $hostname = "localhost";
  $username = "root";
  $password = "root";
  $noerrors = 0;
  $link = @ mysql_connect($hostname, $username, $password);
  if (!$link) {
   $noerrors = 1;
  } else {
   $db_selected = @ mysql_select_db('bookings', $link);
   if (!$db_selected) {
    $noerrors = 2;
   }
  }
  return $noerrors;
 }

I also have a javascript file (booking.js) which will contain the function mentioned in the HTML script, but no code as its the part im stuck with. Below is the HTML for the first row.

HTML:

<div id='right' style='float:right; margin-top:2%;margin-right:15%'>
  <div style="">
   <table style="align:center">
    <tr>
     <td ColSpan="7">A </td>
     <td><img id = "A1" src="images/available.gif" style="border:none" onmouseover="over(this)"     onmouseout="out(this)" onclick="sold(this.id)" /></td>
     <td><img id = "A2" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this.id)" /></td>
     <td><img id = "A3" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
     <td><img id = "A4" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
 <td><img id = "A5" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
 <td><img id = "A6" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
 <td ColSpan="6"></td>
</tr>

How do i achieve the image to change from 'available.gif' to 'taken.gif' according to the AJAX request with json return.

I'll just focus on the sold function because there a quite a few concerns with your code (maybe you haven't submitted enough code). I'm not sure where you want to place the Ajax call but here is a function that will toggle the available/taken image.

function sold( id ) {
  var ele = document.getElementById( id ); // get image element
  //--- toggle image
  var src = ( ele.src == 'images/available.gif') ? 'images/taken.gif' 
                                                 : 'images/available.gif';
  ele.src = src; //--- update image src
}