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 <!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> Code (markup):
I hope this example helps you, <head> <script type="text/javascript"> <!-- function change(imageName,imageSrc){ document.getElementById(imageName).src=imageSrc; } //--> </script> </head> <body> Google <input type="radio" name="muRadio" onclick="change('myImage','http://www.google.com/intl/en_ALL/images/logo.gif')" /><br /> Yahoo <input type="radio" name="muRadio" onclick="change('myImage','http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif')" /><br /> <img id="myImage" src="http://us.i1.yimg.com/us.yimg.com/i/us/av/logo.gif"/> </body> </html> HTML:
What if the image that I want to change is a background image like this? <div class="hjgf" style="background-image:url(images/asdf-.gif); background-repeat:no-repeat; height:434px; width:335px"> Code (markup): Thanks, Matt
The simplest way is to give your div an "id" and apply this code: document.getElementById("yourDivTag").style.backgroundImage="images/myImage.jpg" HTML: CSS: style-property becomes in Javascript: styleProperty Examples: fontSize, borderTop, zIndex...
Thanks Nabil, can you tell me exactly how to put it into my page like the last one please? I can't get it working. Thanks, Matt
<head> <style> <!-- #myDiv{ height:180px; width:300px; margin:10px; padding:10px; border:solid 1px grey; background-image:url("http://us.i1.yimg.com/us.yimg.com/i/us/av/logo.gif"); background-position:center; background-repeat:no-repeat; } --> </style> <script type="text/javascript"> <!-- function change(divId,imageSrc){ document.getElementById(divId).style.backgroundImage='url('+imageSrc+')'; } //--> </script> </head> <body> Google <input type="radio" name="muRadio" onclick="change('myDiv','http://www.google.com/intl/en_ALL/images/logo.gif')" /><br /> Yahoo <input type="radio" name="muRadio" onclick="change('myDiv','http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif')" /><br /> <div id="myDiv"><strong>#myDiv</strong></div> </body> </html> HTML: