PDA

View Full Version : Radio selection loads image

iMissMyCupcake
11-11-2006, 06:33 AM
How do I make it where in a form (such as a user registration form), an image will load on a certain area, or in a certain table when a radio button is select; and if the selection were to change, another picture would load?
Ges
11-16-2006, 07:03 PM
Hi iMissMyCupcake,
I noticed you have'nt had an answer yet so thought I'd try and help. This works in IE and Firefox but is by no means perfect. It is easily adaptable to suit your needs hopefully! Just change the pics in the array to point to your own.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript">
<!--
// specify pics here - any types and as many as you like and where to go when clicked on
var your_images=new Array()
your_images[0]=["pic1.jpg","go_to_this_page.html"]
your_images[1]=["pic2.jpg","go_to_that_page.html"]
your_images[2]=["pic4.gif",""] // dont go anywhere

//Set image border width - 0 = no border
var imgborderwidth=0

function returnimgcode(theimg)
{
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'">'
imghtml+='<img src="'+theimg[0]+'" height=345 wisth-200 border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex)
{
if (document.getElementById)
{
var imgobj=document.getElementById(loadarea)
imgobj.innerHTML=returnimgcode(your_images[imgindex])
return false
}
}
//-->
</script>
</head>

<body>
<form name="my_form">
<input type="radio" name="this_name" onClick="return modifyimage('div_load_area', 0)">pic1<br>
<input type="radio" name="that_name" onClick="return modifyimage('div_load_area', 1)">pic2<br>
<input type="radio" name="another_name" onClick="return modifyimage('div_load_area', 2)">pic3<br>

<!-- pic output area - change this to place it where you require -->
<div id="div_load_area" style="width:80px;height:225px"></div>
</form>

</body>
</html>




It's not perfect like I say but I hope it will help for now.

Regrads,
Ges.