Javascript Help / Radio Buttons into Images

paulatmeghan · 12-29-2009, 11:25 PM

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.

Old Pedant · 12-29-2009, 11:36 PM

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??

paulatmeghan · 12-29-2009, 11:46 PM

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?

Old Pedant · 12-30-2009, 05:33 AM

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>

paulatmeghan · 01-14-2010, 09:56 PM

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!