custom radio button images

I'm in need of a script to replace a series of radio buttons within a "single select" string of choices. What this means is, I need to replace 4 radio buttons with a custom "non" and "on" selected image, that is unique to each of the 4 buttons.

Think of it this way: place 4 radio buttons in a row, and use a different "smiley" image to replace each button. When the user presses any of the four, a new "highlighted" image is seen. Obviously, only one of the four can be selected at any time, and there needs to be a function to toggle off the buttons that are not selected.

I have a script that was able to replace a series of two radio buttons, but I'm totally stumped how to make it work with four.

Would you be able to help?

Best,

porpoise

can you provide your code?

Here you go:

<script>

// this sets the buttons (images) to use
var button1 = 'button1.jpg';
var button2 = 'button2.jpg';
var button1on = 'button1_on.jpg';
var button2on = 'button2_on.jpg';
// End of needed changes

var inputs;

function replaceChecks() {

//get all the input fields on the page
inputs = document.getElementsByName(whichQ);

//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {

//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'radio') {

//create a new image
var img = document.createElement('img');

//check if the checkbox is checked
if(inputs[i].checked) {

if(i==0)
img.src = button1on;
else
img.src = button2on;

} else {
if(i==0)
img.src = button1;
else
img.src = button2;
}

//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);

//hide the checkbox
inputs[i].style.display='none';
}
}
}

function checkChange(i) {
//alert(i);
if(inputs[i].checked) {
inputs[i].checked = '';
if(i==0)
document.getElementById('checkImage'+i).src= button1;
else
document.getElementById('checkImage'+i).src= button2;

} else {
inputs[i].checked = 'checked';
if(i==0){
document.getElementById('checkImage'+0).src= button1on;
document.getElementById('checkImage'+1).src= button2;
}
if(i==1){
document.getElementById('checkImage'+0).src= button1;
document.getElementById('checkImage'+1).src= button2on;
}

}
}

setTimeout("replaceChecks()", 0);

</script>