radio button behavior using images in a div [Archive]

View Full Version : radio button behavior using images in a div

raman19

04-17-2008, 02:17 PM

Hi all,

i have a div that contains images. when one of these images is selected i want the background to change to show that it is selected or "on" . If there was another image that was previously on, i want it to be off by changing the background to the original color. This is similar to how a set of radio buttons works..
There will be one div which will be the container div. each image will have its own div with a unique ID. The number of images varies since they are loaded dynamically. It would look something like below. (This is obviously not complete)
<div class = "containerDiv" id="x" >
<div class="swatch" id="image1" />
<div class="swatch" id="image2" />
</div>

My thought was to have a javascript run where i pass it the image i want to appear on. and then it would cycle through the others and make sure that they appear off. so in psuedo code it would look like.
for each div in containerdiv
set background to off

i dont know the syntax for this.

Thanks in advance for any help. :)

raman19

04-18-2008, 11:15 PM

Is this not possible? is there another way to acheive this?
Did i now explain it correctly or is just nuts? : )

thanks raul

rangana

04-19-2008, 12:27 AM

See if this basic example helps:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Practice Stuff</title>
<style type="text/css">
#x{width:663px;margin:20px auto;padding:10px;border:3px double #aaa;height:240px;}
.swatch_off,.swatch_on{margin:auto;float:left;}
img{width:300px;height:200px;}
#image1{background:#fff;padding:10px;margin:5px;}
#image2{background:#fff;padding:10px;margin:5px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');
image1.onclick=function(){reset();this.style.background='#333';}
image2.onclick=function(){reset();this.style.background='#333';}
}
function reset(){
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');
image1.style.background='#fff';image2.style.background='#fff';}
</script>
</head>
<body>
<div class = "containerDiv" id="x" >
<div class="swatch_off" id="image1" />
<img src="http://xhtml.com/1E6E854A-1A84-400B-A98C-905B2B251CE3/background-color-box-model.gif" alt="test"/>
</div>

<div class="swatch_off" id="image2" />
<img src="http://digital-photography-school.com/blog/wp-content/background-blur-1.jpg" alt="test"/>
</div>
</div>

</body>
</HTML>

THXRANGANA

04-20-2012, 10:05 AM

HOLY ****! I registered in this forum just to post this:
RANGANA THANK YOU FOR THOSE PRECIOUS JS LINES! FCK YEAH!!!!

So simple and so evident, maybe that's why I couldn't find this anywhere! xD
I adapted to my case (increase the opacity of the button):

<script type="text/javascript">
window.onload = function()
{
var image1 = document.getElementById('male');
var image2 = document.getElementById('female');
image1.onclick=function(){reset();this.style.opacity='1';
this.style.filter="alpha(opacity=100)";}
image2.onclick=function(){reset();this.style.opacity='1';
this.style.filter="alpha(opacity=100)";}
}
function reset(){
var image1 = document.getElementById('male');
var image2 = document.getElementById('female');
image1.style.opacity="0.4";image1.style.filter="alpha(opacity=40)";
image2.style.opacity="0.4";image2.style.filter="alpha(opacity=40)";}
</script>

And it just goes like this:

<div>
<ul>
<li class="gender_button" id="male">Male</li>
<li class="gender_button" id="female">Female</li>
</ul>
</div>

Where gender_button is in a css referencing a background image!