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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Javascript Help / Radio Buttons into Images

    Hello!
    I am trying to set up a javascript to code radio buttons as images a la this site: http://www.shopbop.com/swan-ruffle-n...her-shopbysize

    I have been playing around w/ a couple scripts I found online, but haven't been able to find one that works very well. Some of them are too broad & just change all the buttons to a general selected/unselected image. I would want it to apply to different sizes & colours. If anyone could help me or point me in the right direction that would be great!

    Oh, & if it makes any difference I am working w/ 3d cart.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,128
    Thanks
    80
    Thanked 4,556 Times in 4,520 Posts
    Seems easy enough. But they are just doing it by changing the border of the images, not the images themselves.

    *DO* you have pairs of images to use??? Or do you want to do it by just changing border or background??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, you're saying that the styling for selecting/unselecting is just applied to the borders? Would I just replace the radio buttons w/ static images & then use css to change the borders on selection/deselection. I was trying to work w/ this code: Enhanced Checkbox & Radio Input Replacement www.arwebdesign.net/scripts/ecrir but I couldn't get it to work properly. Would I use a script along those lines or is that the wrong direction?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,128
    Thanks
    80
    Thanked 4,556 Times in 4,520 Posts
    I think it would be more effective to use pairs of images, instead.

    Let me make a sample.

    http://www.mywhizbang.com/ImageRadioButtonsDemo.html

    Try that. You can do a VIEW-->>SOURCE to see the actually pretty simple code involved.

    Oh, wth. Here:
    Code:
    <html>
    <head>
    <title>Image Radio Buttons Demo</title>
    <style type="text/css">
    div#RADIOIMAGES img
    {
        border: solid brown 2px;
        margin: 5px; 
        cursor: pointer;
    }
    </style>
    <script type="text/javascript">
    function rbClick( which )
    {
        var div = document.getElementById("RADIOIMAGES");
        var btns = div.getElementsByTagName("img");
        for ( var b = 0; b < btns.length; ++b )
        {
            var btn = btns[b];
            btn.src = "images/" + btn.id + ( btn == which ? "On" : "Off" ) + ".jpg";
            btn.style.borderColor = btn == which ? "red" : "brown";
            if ( btn == which ) document.theForm.RadioSet.value = btn.id;
        }
    }
    </script>
    </head>
    <body>
    <form name="theForm">
    <input type="hidden" name="RadioSet">
    <div id="RADIOIMAGES">
        <img id="Home" src="images/HomeOff.jpg" alt="Home" onclick="rbClick(this);"/>
        <img id="Contact" src="images/ContactOff.jpg" alt="Contact Us" onclick="rbClick(this);"/>
        <img id="Gallery" src="images/GalleryOff.jpg" alt="Gallery" onclick="rbClick(this);"/>
    </div>
    <br/><br/>
    <input type="submit" value="Click to submit...look in the URL to see hidden field being passed"/>
    </form>
    </body>
    </html>
    Last edited by Old Pedant; 12-30-2009 at 06:36 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still haven't had time to work on this cuz of the holidays & then the demo cart I was working on expired, but I'll let ya know if it works!
    Thanks for your help!


  •  

    Tags for this Thread

    Posting Permissions

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