...

View Full Version : custom radio button images



porpoise
02-06-2007, 06:34 PM
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

TripperTreats
02-06-2007, 06:35 PM
can you provide your code?

porpoise
02-06-2007, 06:40 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum