PDA

Click to See Complete Forum and Search --> : radio button checked show picture

YMI
02-02-2004, 09:51 AM
hello,

I don't know a lot about javascripts.

Here is I want to do.

I have a radio button group. I want to show a picture next to the options of the selected radio button.
How can I do that.

Thanks
crh3675
02-02-2004, 10:05 AM
<script type="text/javascript">
function setImage(){
var obj=document.forms[0].group1;
for (i=0;i<obj.length;i++){
if (obj[i].checked){
document.images["group1_image"+i].src="newimagesrc.gif";
}else{
document.images["group1_image"+i].src="oldimagesrc.gif";
}
}
}
</script>


<form>
<input type="radio" name="group1" onclick="setImage()"> <img src="blank.gif" name="group1_image0" width="16" height="18" alt="image"><br>
<input type="radio" name="group1" onclick="setImage()"> <img src="blank.gif" name="group1_image1" width="16" height="18" alt="image"><br>
<input type="radio" name="group1" onclick="setImage()"> <img src="blank.gif" name="group1_image2" width="16" height="18" alt="image"><br>
</form>
fredmv
02-02-2004, 11:15 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function switchImage(src)
{
var i = document.getElementById('img');

if(i.style.visibility != 'visible') i.style.visibility = 'visible';

i.src = src;
}

onload = function()
{
var inputs = document.getElementsByTagName('input');

var imgs =
[
'http://www.eyesonff.com/ff10/images/n-tidus.jpg',
'http://www.eyesonff.com/ff10/images/n-yuna.jpg',
'http://www.eyesonff.com/ff10/images/n-auron.jpg',
'http://www.eyesonff.com/ff10/images/n-rikku.jpg',
'http://www.eyesonff.com/ff10/images/n-wakka.jpg',
'http://www.eyesonff.com/ff10/images/n-lulu.jpg',
'http://www.eyesonff.com/ff10/images/n-kimahri.jpg'
];

for(i=0; i<inputs.length; i++)
{
with(inputs.item(i))
{
try
{
window['i' + i] = new Image();
window['i' + i].src = imgs[i];
setAttribute('title', imgs[i]);
}

catch(e)
{
break;
}
}

inputs[i].onclick = function() { switchImage(this.title); }
}
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
* {
font-family: lucida, helvetica;
color: #bab8d8;
}

html, body {
background: #534e8e;
margin: 0 auto;
padding-top: 20px;
width: 95%;
}

form {
width: 45%;
padding: 5px;
border: solid #000 1px;
float: left;
background: #6a63b5;
}

fieldset {
border: solid #c3c0e8 1px;
}

label {
display: block;
}

#outer {
width: 45%;
float: right;
}

#img {
border: solid #000 1px;
}
/*]]>*/
</style>
</head>

<body>
<form action="#" onsubmit="return false;">
<div>
<fieldset>
<legend>Select a character:</legend>
<label for="c1">
<input type="radio" name="c" id="c1" />
Tidus
</label>

<label for="c2">
<input type="radio" name="c" id="c2" />
Yuna
</label>
<label for="c3">
<input type="radio" name="c" id="c3" />
Auron
</label>
<label for="c4">
<input type="radio" name="c" id="c4" />

Rikku
</label>
<label for="c5">
<input type="radio" name="c" id="c5" />
Wakka
</label>
<label for="c6">
<input type="radio" name="c" id="c6" />
Lulu
</label>

<label for="c7">
<input type="radio" name="c" id="c7" />
Kimahri
</label>
</fieldset>
</div>
</form>
<div id="outer">
<img id="img" src="" style="visibility: hidden;" alt="" />
</div>
</body>
</html>