Using images as radio buttons

Hi all
Complete newbie. Have a table posing the question "Which do you like best"? Two possible responses. Want to replace radio buttons COMLETELY with images that represent those possible responses. With A LOT of help, I've done that using a "hidden" question (code below). It works - I've checked and clicking on one or other image indeed returns the corresponding value. As far as the user is concerned, however, nothing is happening. Not ideal.

I have two images for each choice - the originals that come up on page load, and a version of each with a big tick in the middle, which I would LIKE to come up onclick. Can anyone enlighten me on how to make it so that if CokeRange.jpg is clicked, CokeRangeClicked.jpg shows and if PepsiRange.jpg is clicked, PepsiRangeClicked.jpg shows - but that, like the radio buttons they are pretending to be, only one of the images remain with the big tick?

Here's the code:

re: Using images as radio buttons

[html]
<script type="text/javascript">
function changeVal(value) {
document.getElementById('Q6_var').value = value;
var coke = document.getElementById('im1');
var pepsi = document.getElementById('im2');
coke.src = value==1 ? 'cokeRangeClicked.jpg' : 'cokeRange.jpg' ;
pepsi.src = value==1 ? 'pepsiRange.jpg' : 'pepsiRangeClicked.jpg' ;
}
</script>
<input id="Q6_var" name="Q6_var" type="hidden" value="0">

<TABLE CELLPADDING="5" BORDER="0" width="100%">
<TR>
<TD>
<img id="im1" src="CokeRange.jpg" alt="" border="1"
onclick="changeVal(1);">
</TD>
<TD>
<img id="im2" src="PepsiRange.jpg" alt="" border="1"
onclick="changeVal(2);">
</TD>
</TR>
</TABLE>
[/html]

re: Using images as radio buttons

Thank you very much!! I've checked the data, and the correct value is being set for the image chosen. A thing of beauty.

re: Using images as radio buttons

You are welcome. :)

But in future, do ask such questions in Javascript Forum. You may get more replies there.