Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Virginia
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    styled RADIO BUTTONS (css/javascript)

    I've seen various websites throughout the years that have utilized images or background images as substitutes for RADIO BUTTONS via onclick, etc. The latest I've seen was via a neat site called k10k.net. I have found this site to be a truly neat site and don't want to step on the toes of their concept. With that I'm attaching a link to their site only as a reference so you can better understand what I'm speaking of.

    http://www.k10k.net/sections/sides/side_rateissue.aspx

    Does anyone have a moment to point me in the right direction and/or provide code that can help me out. Any assistance you have would be greatly appreciated!

    Have a wonderful week!

    D.

  • #2
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Here's what I use.... you don't have to change any stylesheets or anything, just link the .js file:

    Code:
    //global variables that can be used by ALL the function son this page. 
    var inputs; 
    var imgFalse = 'images/false2.gif'; 
    var imgTrue = 'images/true2.gif'; 
    
    //this function runs when the page is loaded, put all your other onload stuff in here too. 
    function init() { 
        replaceChecks(); 
    } 
    
    function replaceChecks() { 
         
        //get all the input fields on the page 
        inputs = document.getElementsByTagName('input'); 
    
        //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') == 'checkbox') { 
                 
                //create a new image 
                var img = document.createElement('img'); 
                 
                //check if the checkbox is checked 
                if(inputs[i].checked) { 
                    img.src = imgTrue; 
                } else { 
                    img.src = imgFalse; 
                } 
    
                //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'; 
            } 
        } 
    } 
    
    //change the checkbox status and the replacement image 
    function checkChange(i) { 
    
        if(inputs[i].checked) { 
            inputs[i].checked = ''; 
            document.getElementById('checkImage'+i).src=imgFalse; 
        } else { 
            inputs[i].checked = 'checked'; 
            document.getElementById('checkImage'+i).src=imgTrue; 
        } 
    } 
    
    window.onload = init;
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    Virginia
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Troy297 ... BUT ...

    I might have slipped an extra can of dumbass in my salad for dinner tonight, so please pardon if I'm missing something, but is there a way to apply this code to RADIO BUTTONS versus that of the checkboxes you've provided code for?

    Thanks again !

  • #4
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Well... I edited the above a little but haven't tested it... try this:

    Code:
    var inputs; 
    var imgFalse = 'images/false2.gif'; 
    var imgTrue = 'images/true2.gif'; 
    function init() { 
        replaceChecks(); 
    } 
    function replaceChecks() { 
        inputs = document.getElementsByTagName('input'); 
        for(var i=0; i < inputs.length; i++) { 
    
    
    
           //this is the only part I changed
            if(inputs[i].getAttribute('type') == 'radio') { 
                
     
    
                var img = document.createElement('img'); 
                if(inputs[i].checked) { 
                    img.src = imgTrue; 
                } else { 
                    img.src = imgFalse; 
                } 
                img.id = 'checkImage'+i; 
                img.onclick = new Function('checkChange('+i+')'); 
                inputs[i].parentNode.insertBefore(img, inputs[i]); 
                inputs[i].style.display='none'; 
            } 
        } 
    } 
    
    function checkChange(i) { 
        if(inputs[i].checked) { 
            inputs[i].checked = ''; 
            document.getElementById('checkImage'+i).src=imgFalse; 
        } else { 
            inputs[i].checked = 'checked'; 
            document.getElementById('checkImage'+i).src=imgTrue; 
        } 
    } 
    
    window.onload = init;
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •