ajax is messing with ids and this function colour()

[poisonedblueeyes]

---

please help me noone is helping me. i attached the image that shows what it is and how i click on one per row(so each number i click on can be saved in a form input(so i can take it easier and store the users choices once for each of the five columns.

its a mess. i click the down arrows of my thing to get a new list of things and when i click the new list(generated by ajax) the function  colours() not to mention the main one that changes the hackground images for the tables messes up too! they all mess up. ill click a number for the hair column and ill get a freakin image from a whole different column. the code is long here:

i really think the whole thing is all imporrtant tho, so i wont leave anything out.

MAIN PAGE:

<style>
p{cursor:crosshair;display:inline;}
.bg{background-image: url(bg/0.png);height:343px;width:243px}
.skin{background-image: url(skin/0.png);height:343px;width:243px}
.clothes{background-image: url(clothes/0.png);height:343px;width:243px}
.hair{background-image: url(hair/0.png);height:343px;width:243px;background-repeat:no-repeat;}
.fg{background-image: url(fg/0.png);height:343px;width:243px}</style>
<center>
<br>

<table style="width:600px" cellspacing="0" cellpadding="0" border="0"><tr><td style="height:343px;width:243px;background:#111111">
<table id="bg" class="bg" style="" cellspacing="0" cellpadding="0" border="0"><tr><td valign="top">
<table id="skin" class="skin" style="" cellspacing="0" cellpadding="0" border="0"><tr><td valign="top">
<table id="clothes" class="clothes" style="" cellspacing="0" cellpadding="0" border="0"><tr><td valign="top">
<table id="hair" class="hair" style="" cellspacing="0" cellpadding="0" border="0"><tr><td valign="top">
<table id="fg" class="fg" style="" cellspacing="0" cellpadding="0" border="0"><tr><td></td></tr></table>
</td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td><td>
<table cellpadding="0" cellspacing="0" border="0" style="width:357px;height:343px;background:#000000;color:white;font-family:arial;font-size:8pt">
<tr>
<td onclick="changea('bg', 'url(hair/00.png)')">xbg</td>
<td onclick="changea('skin', 'url(hair/00.png)')">xskin</td>
<td onclick="changea('clothes', 'url(hair/00.png)')">xclothes</td>
<td onclick="changea('hair', 'url(hair/00.png)')">xhair</td>
<td onclick="changea('fg', 'url(hair/00.png')">xfg</td>

</tr>
<tr>
<td onclick="pagea('b', 's')">^</td>
<td onclick="pagea('s', 's')">^</td>
<td onclick="pagea('c', 's')">^</td>
<td onclick="pagea('h', 's')">^</td>
<td onclick="pagea('f', 's')">^</td>

</tr>


<tr>

<td><table id="b" style="width:72px" cellspacing="0" cellpadding="0" border="0">
<?php $b = "0"; while($b < 20){ ?>
<tr><td id="b<?php echo $b; ?>" onmouseover="this.style.background='#555555'" onmouseout="this.style.background='#000000'" onclick="colour('b<?php echo $b; ?>', 'ssb');changea('bg', 'url(bg/<?php echo $b; ?>.png)')"><?php echo $b; ?></td></tr>
<?php $b++; } ?>
</tr></table></td>

<td><table id="s" style="width:71px" cellspacing="0" cellpadding="0" border="0">
<?php $s = "0"; while($s < 20){ ?>
<tr><td id="s<?php echo $s; ?>" onmouseover="this.style.background='#555555'" onmouseout="this.style.background='#000000'" onclick="colour('s<?php echo $s; ?>', 'sss');changea('skin', 'url(skin/<?php echo $s; ?>.png)')"><?php echo $s; ?></td></tr>
<?php $s++; } ?>
</tr></table></td>

<td><table id="c" style="width:71px" cellspacing="0" cellpadding="0" border="0">
<?php $c = "0"; while($c < 20){ ?>
<tr><td id="c<?php echo $c; ?>" onmouseover="this.style.background='#555555'" onmouseout="this.style.background='#000000'" onclick="colour('c<?php echo $c; ?>', 'ssc');changea('clothes', 'url(clothes/<?php echo $c; ?>.png)')"><?php echo $c; ?></td></tr>
<?php $c++; } ?>
</tr></table></td>

<td><table id="h" style="width:71px" cellspacing="0" cellpadding="0" border="0">
<?php $h = "0"; while($h < 20){ ?>
<tr><td id="h<?php echo $h; ?>" onmouseover="this.style.background='#555555'" onmouseout="this.style.background='#000000'" onclick="colour('h<?php echo $h; ?>', 'ssh');changea('hair', 'url(hair/<?php echo $h; ?>.png)')"><?php echo $h; ?></td></tr>
<?php $h++; } ?>
</tr></table></td>

<td><table id="f" style="width:72px" cellspacing="0" cellpadding="0" border="0">
<?php $f = "0"; while($f < 20){ ?>
<tr><td id="f<?php echo $f; ?>" onmouseover="this.style.background='#555555'" onmouseout="this.style.background='#000000'" onclick="colour('f<?php echo $f; ?>', 'ssf');changea('fg', 'url(fg/<?php echo $f; ?>.png)')"><?php echo $f; ?></td></tr>
<?php $f++; } ?>
</tr></table></td>

</tr>
<tr>
<td onclick="pagea('b', 'a')">^</td>
<td onclick="pagea('s', 'a')">^</td>
<td onclick="pagea('c', 'a')">^</td>
<td onclick="pagea('h', 'a')">^</td>
<td onclick="pagea('f', 'a')">^</td>

</tr>
</table>
</td></tr></table>




</center>

<script type="text/javascript">
function pagea(pidea, wha){var pideas = "p" + pidea;var sendea = document.getElementById(pideas).value;
if(wha == "s"){sendea--;}else{sendea++;} document.getElementById(pideas).value=sendea;
var queryString = "?page=" + sendea + "&varea=" + pidea;
var ajaxRequest;  // The variable that makes Ajax possible!

try{ajaxRequest = new XMLHttpRequest();} catch (e){try{ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try{ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){alert("Your browser broke!");return false;}}}
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){var ajaxDisplay = document.getElementById(pidea);
		ajaxDisplay.innerHTML = ajaxRequest.responseText;}}
ajaxRequest.open("GET", "http://www..com/i/c/avitar/ajax.php" + queryString, true);
ajaxRequest.send(null);  }

function colour(sos, punk){
var valeu = document.getElementById(punk).value;
document.getElementById(valeu).style.color='white';
document.getElementById(punk).value=sos;
document.getElementById(sos).style.color='#555555';
}
function changea(idea, imagea) {
        document.getElementById(idea).style.backgroundImage = imagea;
      }

</script>
<form><input type="hidden" id="ssb" value="ssb"><input type="hidden" id="sss" value="sss"><input type="hidden" id="ssc" value="ssc"><input type="hidden" id="ssh" value="ssh"><input type="hidden" id="ssf" value="ssf">

<input type="hidden" id="pb" value="0"><input type="hidden" id="ps" value="0"><input type="hidden" id="pc" value="0"><input type="hidden" id="ph" value="0">
<input type="hidden" id="pf" value="0">
</form>

 

AJAX PAGE:

<?php $page = mysql_real_escape_string($_GET

---

);
$varea = mysql_real_escape_string($_GET[varea]);
if($varea = "b"){$k = "bg";}
if($varea = "s"){$k = "skin";}
if($varea = "c"){$k = "clothes";}
if($varea = "h"){$k = "hair";}
if($varea = "f"){$k = "fg";}
else{} ?>
<?php $x = $page * 20; $stop = $x + 20;while($x < $stop){ ?>
<tr><td id="<?php echo $varea.$x; ?>" onmouseover="this.style.background='#555555'" onmouseout="this.style.background='#000000'" onclick="colour('<?php echo $varea.$x; ?>', 'ss<?php echo $varea; ?>');changea('<?php echo $k; ?>', 'url(<?php echo $k; ?>/<?php echo $x; ?>.png)')"><?php echo $x; ?></td></tr>
<?php $x++; } ?>

 

[attachment deleted by admin]