asked on

Radio button to change an image

Hi.

I have a form with four radio buttons. How can I assiciate an image to a radio button so that the image will be displayed when a user clicks the radio button.

For example:
I have an image on my page.
Radio1 will display img1.gif
Radio2 will display img2.gif
Radio3 will display img3.gif
Radio4 will display img4.gif
I don't want to keep reloading the page just to show the new picture.

Thanks.

50 bonus points if it's answered quickly.

Thanks.

ASKER CERTIFIED SOLUTION

jaysolomon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

VincentPuglia

<form...>
<input type='radio' onclick='doit(1)'>
<input type='radio' onclick='doit(2)'>
....
</form>
<img src='something.gif'....>

<script>
function doit(picNum)
{
document.images[imgNum].src = 'img' + picNum + '.gif'
}
...

Vinny

jaysolomon

vinny where do you declare your imgNum?

should be an image name

document.images['imageName'].src = 'img'+ picNum +'.gif';

apprenti

<html lang="en"><head>
<script type="text/javascript">



</script>

<style type="text/css">

.miradio {width:6%}

.labels {font-size:120%}

</style>
<link rel="stylesheet" href="stylo1.css" type="text/css"></head>
<body>
<h1> Navigation by radio button </h1>
<img src="smiley200-1.jpg" alt="" /><br>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>

<tr>
<td> </td></tr>
<tr>
<td>
<form name="form1">
<table cellspacing="0" cellpadding="5" width="90%" align="center" border="0">
<tbody>
<tr>

<td class="miradio"><input onclick="allez('smiley200-1.jpg');" type="radio" value="1"

name="radbutt"> </td>
<td><span class="labels" >pic1</span></td></tr>
<tr>
<td class="miradio"><input onclick="allez('smiley200-2.jpg');" type="radio" value="2"

name="radbutt"> </td>
<td><span class="labels" >pic2</span></td></tr>
<tr>

<td class="miradio"><input onclick="allez('smiley200-3.jpg');" type="radio" value="3"

name="radbutt"> </td>
<td><span class="labels" >pic3</span></td></tr>
<tr>
<td class="miradio"><input onclick="allez('smiley200-4.jpg');" type="radio" value="4"

name="radbutt"> </td>
<td><span class="labels" title="">pic4</span></td></tr></tbody></table><br> <br> <br>

<br>
<p><span style="font-size: 70%;">

</span> <br> </p></form></td></tr></tbody></table></body></html>

Nushi

js is right as always.
another solutionis to use a function which reacive the arguments to work on.

for example it will reacive the imag to be swap, origin etc.

here is a sample code (not tested).

var images = new Array();
images[0] = new Image();
images[0].src = 'a.gif';

images[1] = new Image();
images[1].src = 'b.gif';
...

function showImg( radioObj ){
document.getElementById('imgId').src = images[radioObj.imgId];
}

Remarks:

and you will have the image span to show the image in the screen,
the span will be updated dynamiclly based on te radio clicked
instead of span you can use the img tag and simply swap the img
that you show to the user.
the radio will have attribute named imgId to be set 0-n representing as many images as you need.

<img id='imgId' src=''>

<radio imgId="0" onclick='showimg(this)'>img 0
...

Nushi.

jaysolomon

apprenti
i guess your assuming it is the first pic in the page?

GwynforWeb

Surely it is just this

<body>
<input type="radio" name="rad1" onclick="document.Img.src='https://www.experts-exchange.com/images/pe/376234.jpg'" checked>
<input type="radio" name="rad1" onclick="document.Img.src='https://www.experts-exchange.com/images/certification.gif'">
<input type="radio" name="rad1" onclick="document.Img.src='https://www.experts-exchange.com/images/indexLogoPerson_07.gif'">
<input type="radio" name="rad1" onclick="document.Img.src='https://www.experts-exchange.com/images/indexLogoPerson_06.gif'">
</p>
<img SRC="https://www.experts-exchange.com/images/pe/376234.jpg" name="Img"> </p>
</body>

StevenJames

ASKER

HAHA!!!

Thanks guys.

jaysolomon

on vinny approach

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

</script>
</head>
<body>
<form name="form1" method="post" action="">
<img name="blank" src="">
<input type="radio" name="rad1" onclick="swapPic(1)">
<input type="radio" name="rad1" onclick="swapPic(2)">
<input type="radio" name="rad1" onclick="swapPic(3)">
<input type="radio" name="rad1" onclick="swapPic(4)">
</form>
</body>
</html>

jaysolomon

Glad we could help and thanks for the A

jAy

apprenti

Yeah...I guess one could have

function allez(thepic)
{
document.images["picbox1"].src = thepic;
}

used with
<img src="smiley200-1.jpg" name="picbox1" alt="" />

(I customised one of my own pages, maybe a bit too quickly).