Hi,

I have this code that changes the table cell color and selects a radio button when a cell is clicked, then keeps it a certain color until another is clicked. I would like to modify it to change an image in another area of the page when a radio button is selected and stay on that image until another is selected. There will be 2 sets of radio buttons and 2 images that can be changed depending on which radio buttons are selected. Can someone please help me with this?

Thanks, Matt

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  td.blue {
font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
  border: 0px;
  background: #71B9FF;
}
td.blue2 {
font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
  border: 0px;
  background: #C1E0FF;
}
td.blue3 {
font-family: arial; font-weight: bold; font-size: 12px; color: #000000; text-decoration: none;
  border: 0px;
  background: #0000FF;
}
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcTRMseOver(zxcobj,zxcover,zxcout,zxcclick){
 if (!zxcobj.data){
  var zxctable=zxcobj;
  while (zxctable.parentNode){
   if (zxctable.tagName=='TABLE') break;
   zxctable=zxctable.parentNode;
  }
  zxcobj.data=[zxctable,zxcout,zxcclick]
  if (!zxctable.hold) zxctable.hold=['X',zxcobj.getElementsByTagName('INPUT')[0]];
  zxcAddEvt(zxcobj,'zxcTRMseOut','mouseout');
  zxcAddEvt(zxcobj,'zxcTRMseClick','click');
 }
 if (zxcobj!=zxcobj.data[0].hold[0]) zxcobj.className=zxcover;
}

function zxcTRMseOut(zxcevt){
 if (this!==this.data[0].hold[0]){
  this.className=this.data[1];
 }
}

function zxcTRMseClick(){
 if (this.data[0].hold[0]) this.data[0].hold[0].className=this.data[1];
 this.data[0].hold[1].checked=false;
 this.data[0].hold=[this,this.getElementsByTagName('INPUT')[0]];
 this.data[0].hold[1].checked=true;
 this.className=this.data[2];
}

var zxcEvt=0;

function zxcEventAdd(zxco,zxct,zxcf) {
 if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
  var zxcPrev=zxco["on" + zxct];
  if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
  else { zxco['on'+zxct]=zxco[zxcf]; }
 }
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
 zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
}

/*]]>*/
</script></head>

<body>

<table>
<tr>
 <td class="blue" onmouseover="zxcTRMseOver(this,'blue2','blue','blue3');" align="center">
 <img src="images/asdf.gif" width="114" height="149">
 <br>
 <input type="radio" name="asdf" id="rad1" value="asdf">
  asdf
 </td>
 <td class="blue" onmouseover="zxcTRMseOver(this,'blue2','blue','blue3');" align="center">
 <img src="images/asdf.gif" width="114" height="149">
 <br><input type="radio" name="asdf" id="rad2" value="asdf">
 asdf
 </td>
</tr>
</table>
</body>

</html>