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:

HTML Code:

<!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):

HTML Code:

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

HTML Code:

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

Thread: radio button behavior using images in a div

Thread Tools

Search Thread

radio button behavior using images in a div

Bookmarks

Bookmarks

Posting Permissions