using onClick to change images

kyle.burnam · March 9th, 2005, 07:05 PM

I am trying to figure out how to change an image according to the value of a radio button. I have a basic script that accomplishes this if it stands alone. The problem is there are 4 groups of radio buttons on the page and I want each group to control its own picture. The script I have just hunts out the first image in the html code and changes it. I know that somehow I need to pass a location or some indicator into the function for it to determine which image to change. Any suggestions would be greatly appreciated. Below is the code I'm using now.

<html>

<head>
<script>
function display(pic)
{
document.images[0].src=pic;
}
</script>
</head>

<body>
<form name="a">
<br><br>
<input type="radio" name="a" value="0" onClick=display('images/arrow1.bmp')>
yes<br>
<input type="radio" name="b" value="1" onClick=display('images/arrow2.bmp')>
no<br>
<input type="radio" name="c" value="2" onClick=display('images/arrow1.bmp')>
other
<img border="0" src="images/arrow1.bmp"><br>
<img src="images/default.bmp"><br>
</body>

</html>

TIA
Kyle

joefawcett · March 10th, 2005, 08:25 AM

You need to add a second parameter to your function, the index of the image to alter:

Code:

onClick=display('images/arrow1.bmp', 0)

function display(pic, index)
{
       document.images[index].src=pic;
}

Each group of radio buttons controls its own indexed image, so your original group all have a second parameter of 0, the next block have a second parameter of 1 etc.

--

Joe (Microsoft MVP - XML)

kyle.burnam · March 10th, 2005, 11:09 AM

Hey thanks. It works like a charm.

Kyle