SitePoint Sponsor |
|
User Tag List
Results 1 to 1 of 1
-
Jul 16, 2007, 17:52 #1
- Join Date
- Sep 2004
- Location
- Oregon
- Posts
- 112
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Change images when radio buttons are clicked?
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>
Bookmarks