Changing image with radio buttons [Archive]

Click to See Complete Forum and Search --> : Changing image with radio buttons

nostalgia

12-31-2004, 08:49 AM

Hello
I'm pretty new to all of this, I have hit a snag a snag and could really use some help. On my homepage I have used CSS to create a table for an area to put a bio of myself, in the bio there is a small picture of myself. I would like to be able to have a row of radio butons under the image so that when the user selects one of the radio buttons the image of myself will be replaced by another image. I'm pretty sure that this can be done but I'm not so sure how. This is the closest that I have been able to get, I know it's probably not even close but here's the code:

<DIV id=table
style="border: 1px solid #333333; padding: 5px; z-index: 2; left: 500; position: absolute; top: 325; height: 340; width: 245; overflow: auto; filter: Alpha(Opacity=60, FinishOpacity=100); background color: transparent"> <p><td><p align=center><font face= "verdana" color="#777777" size="1"> <font color="#999999">[[*The Boy*]]</font><br></p> <img src="images/the boy.jpg">

<br><br><br>
<div class="h1" align="center">
<table border="0" cellpadding="1">
<td><form><font face= "verdana" color="#777777" size="1"><input type="radio" name="graphic" value=http://img.photobucket.com/albums/v413/Ell4iot/mymesmall.jpg>[one]</font></td>
<td><form><font face= "verdana" color="#777777" size="1"><input type="radio" name="graphic" value=http://img.photobucket.com/albums/v413/Ell4iot/head.jpg>[two}</font></td>
<td><form><font face= "verdana" color="#777777" size="1"><input type="radio" name="graphic" value=http://img.photobucket.com/albums/v413/Ell4iot/malepatternbaldness.jpg>[three]</font></td>
</tr>
</form></table>
</div>

So what do I need to do?

Thanks,
nostalgia

BonRouge

12-31-2004, 01:50 PM

This (http://bonrouge.com/br.php?page=image-switch) might help.

nostalgia

01-01-2005, 04:46 AM

Thanks, that does help but I am still having some troubles. I can get everything set out but I can get the pictures to switch when the button is clicked. The first image shows up but then it won't change from there. I don't understand how it would be able to source the secondary images with just the filename and no information on where to find the images. This is what I am using:

<div class="fright"><img src="images/the boy.jpg" id="Boy" height="287" width="215" alt="" /></div>
<form name="form1" method="post" action="">
<fieldset id="radiobs">
<ul>
<li><label>
<input name="radio" type="radio" onclick="switchImg('mymesmall.jpg')" checked="checked">Myme</label></li>
<li><label>
<input type="radio" onclick="switchImg('I see you.jpg')" name="radio">Peek</label></li>
<li><label>
<input type="radio" onclick="switchImg('whisky.jpg')" name="radio">Boy</label></li>
</ul>
</fieldset>
</form>[COLOR=red]<div class="fright"><img src="images/the boy.jpg" id="Boy" height="287" width="215" alt="" /></div>

BonRouge

01-01-2005, 05:02 AM

Did you forget about the javascript and css that go with it?
It's the javascript that does the work.
The files you reference should be in the same directory.
I noticed one of your file names has spaces. Change it. Take the spaces out.

BonRouge

01-01-2005, 05:17 AM

OK. Here's the barebones (more-or-less):

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
fieldset {width:150px;}
#two, #three {display:none}
</style>
<script type="text/javascript">
function switchImg(i){
document.images["wine"].src = i;
}
</script>
</head>
<body>
<div class="fright"><img src="wine.jpg" id="wine" height="100" width="100" alt="" /></div>
<form name="form1" method="post" action="">
<fieldset id="radiobs">
<ul>
<li><label>
<input type="radio" onclick="switchImg('wine.jpg')" name="radio" />Wine</label></li>
<li><label>
<input type="radio" onclick="switchImg('beer.jpg')" name="radio" />Beer</label></li>
<li><label>
<input type="radio" onclick="switchImg('whisky.jpg')" name="radio" />Whisky</label></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>

Copy that, put it in your browser, and change the image names for your image names (they should be in the top directory - if not, reference them well - eg. use 'images/mypic.jpg').
Then, when you see it works, transfer it all to your page - javascript, css, and html. Position the picture and form where you want them on your page and... God, I could be here forever.
If you have problems, show me a link to your page and I'll see what I can do.

Good luck.

nostalgia

01-01-2005, 05:34 AM

Awesome, okay thank you very much, I get it now. Thanks for all your help.