Colors, which will lead to graphics, I am sure, since you labelled them 'Image'.
First, we need to id what we want to modify
before:
HTML Code:
 <table width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="10" background="<background selection>">
after:
HTML Code:
 <table id=cardTemplate width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="10">
So now the table for your template is labelled 'cardTemplate'



Now the radio buttons. This is where CSS comes into play.
FYI, you surrounded them with the label tag which disabled them

before
HTML Code:
 <td><label>
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="1"/>
      Blue Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="2" />
      Red Image<br />
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="3" />
      Purple Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="4" />
      No Image</label></td>
after
HTML Code:
 <td>
      <input name="radiobutton" type="radio" value="blue" tabindex="1"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      Blue Image 
      <input name="radiobutton" type="radio" value="red" tabindex="2"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      Red Image<br />
      <input name="radiobutton" type="radio" value="purple" tabindex="3"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      Purple Image 
      <input name="radiobutton" type="radio" value="transparent" tabindex="4"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      No Image</td>
Whoa! You catch that? Simple eh?

.style.backgroundColor references the background color of the card template