How to switch from drop down list to radio buttons onchange that recognizes variable

**techie35** · 12-14-2008 10:39 PM

HI,

I have working code a friend help me with that creates an array and builds a select option (drop down list). Based on the option chosen in the drop list three images change. This basically picking a theme for you page:
An Avatar, header image and background image.

The option select works but I want change the drop list to radio buttons.
I am stuck on how set up the "value" in the radio buttons to the array of images that need to be changed based on the button selected.

The javascript is using the prototype framework.

Here are links to sample pages:
Working dropdown list:
http://fuzzbert.org/change_test.html

This is the sample layout I would like but does not work:
http://fuzzbert.org/change_test_radio.html

Any help very appreciated!!!

**Fang** · 12-15-2008 04:48 AM

Just pass the value to the function changeAvatar(this.value)

**vwphillips** · 12-15-2008 05:59 AM

consider

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>change _test</title>
<link rel="stylesheet" href="http://fuzzbert.org/styles/style.css" type="text/css" media="screen" />




<style>
#headerContainerImage {
	background-image: url(http://fuzzbert.org/images/themes/img_banner_generic.png);
}
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function changeAvatar(cb){
 var frm=cb.form;
 var imgs=frm.getElementsByTagName('IMG');
 var ips=frm.getElementsByTagName('INPUT');
 for (var cnt=0,zxc0=0;zxc0<ips.length;zxc0++){
  if (ips[zxc0].type=='radio'){
   if (!ips[zxc0].save){
    ips[zxc0].save=[imgs[cnt],imgs[cnt].src];
   }
   ips[zxc0].save[0].src=ips[zxc0].save[1];
   if (ips[zxc0]==cb){
    imgs[zxc0].src='http://www.vicsjavascripts.org.uk/StdImages/'+cb.value;
   }
   cnt++;
  }
 }
}
/*]]>*/
</script>
</head>

<body >

<div id="globalContainer">

<div id="headerContainer">
<!-- background image -->
<div id="headerContainerImage">


<!-- update jsp -->
<div id="avatar" style="position:relative; top:0; left:0;"><img src="http://fuzzbert.org/images/header_chronox_f_1.png" id="avatarImg"/></div>


<!-- end background image -->
</div>
<div id="navMainBg">

</div>

<!-- End container for header elements -->
</div>

<!-- //////////////////////container Second Tier///////////////////////////// -->
<div id="secondTierContainer">


<!--start pageHeader -->

<div id="pageHeader">
<h1></h1>
<!-- jsp call updated from database -->
<img src="http://fuzzbert.org/images/themes/img_porthole_chronox_f1.png" border="0" id="portholeAvatar" />
<br clear="all" />
<!-- Div defines left column containing avatar porthole -->
<div id="pageHeaderLeftColumn">

<!-- div styles the position and text of the left column content -->
<div>
<ul>
<br />
<br />
<!--<li> <a href="" >Change Avatar</a></li>
<select id='avatarDropList' onchange="changeAvatar();">
</select>-->
</ul>
<!-- end left column content -->
</div>

<!-- end left column containter -->
</div>



<div id="pageHeaderRightColumn"></div>
<!-- end PageHeader -->
</div>
<h2>Choose your avatar wisely...</h2>




	<form name="form1">
	<div class="avatarColumn">

 <!-- will be an ajax pop up of description -->

	<img
		src="http://fuzzbert.org/../images/themes/img_porthole_arch_f1.png" /> <br />
		<input type="radio" name="avatar" 	value="One.gif" onClick="changeAvatar(this)" /> <br />
	<img
		src="http://fuzzbert.org/../images/themes/img_porthole_arch_m1.png" /><br />
		 <input type="radio" name="avatar" 	value="Two.gif" onClick="changeAvatar(this)"
	 />  <br />
	</div>


<div class="avatarColumn">



	<img
		src="http://fuzzbert.org/../images/themes/img_porthole_chronox_f1.png" /> <br />

		<input type="radio" name="avatar" 	value="Three.gif" onClick="changeAvatar(this)"
	 />
     <br />
	<img
		src="http://fuzzbert.org/../images/themes/img_porthole_chronox_m1.png" />
<br /><input type="radio" name="avatar" 	value="Four.gif" onClick="changeAvatar(this)"
	 /> <br />
	</div>


<input type="button" value="Submit" onClick="changeAvatar()">
	</form>

	<div style="clear: both"></div>



	<!-- end fullwidthdiv --></div>

</div>


<!-- /////////////////////////////End global Contaner/////////////////////////////// -->
</div>


</body>
</html>

**techie35** · 12-15-2008 01:55 PM

HI Fang and Phillps,

Thank you so much for your prompt response. I will test it out this afternoon. and see if works.

Much appreciated!

Very Grateful - Techie

Thread: How to switch from drop down list to radio buttons onchange that recognizes variable

Thread Tools

Display

How to switch from drop down list to radio buttons onchange that recognizes variable

Thank you!!!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions