We help IT Professionals succeed at work.

Radio button to change an image

StevenJames
StevenJames asked
on
581 Views
Last Modified: 2010-05-18
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.
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
<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
vinny where do you declare your imgNum?

should be an image name

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

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

<!--
// by apprenti

function allez(thepic)

{

  document.images[0].src = thepic;

}

//-->

</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>&nbsp;Navigation by radio button&nbsp;</h1>
<img src="smiley200-1.jpg" alt="" /><br>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
  <tbody>
   
    <tr>
    <td>&nbsp;</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>

Commented:
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.
apprenti
i guess your assuming it is the first pic in the page?
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>

Author

Commented:
HAHA!!!

Thanks guys.
on vinny approach

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function swapPic(picNum){
      return document.images['blank'].src = 'img'+ picNum +'.gif';
}
// -->
</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>
Glad we could help and thanks for the A

jAy

Commented:
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).
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.