...

View Full Version : Changing image by selecting drop down menu



katlees
10-16-2003, 08:40 PM
I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down?

Kathy

sciguyryan
10-16-2003, 09:22 PM
like so:


<HTML>
<HEAD><TITLE>JS1</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--
image1 = new image(120,90)
image1.src = "desk1.gif"
image2 = new image(120,90)
image2.src = "desk2.gif"
image3 = new image(120,90)
image3.src = "desk3.gif"
image4 = new image(120,90)
image4.src = "desk4.gif"
function loadCatch(list)
{
var img = list.options[list.selectedIndex].value
document.thumbnail.src = eval(img + ".src")
}
</SCRIPT>
</HEAD>
<BODY>
<ING SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
<FORM>
<SELECT NAME="catch" onChange="loadCatch(this)">
<OPTION VALUE="Image1">Bands
<OPTION VALUE="Image2">Clips
<OPTION VALUE="Image3">Lamp
<OPTION VALUE="Image4">Else
</SELECT>
</FORM>
</BODY>
</HTML>



hope that helped.

katlees
10-16-2003, 09:36 PM
Gave me an error. Won't work.

sciguyryan
10-16-2003, 09:53 PM
Object expected? i will try to correct this for you.

katlees
10-16-2003, 10:02 PM
Thanks

glenngv
10-17-2003, 02:32 AM
Image1 = new Image(120,90);
...
document.thumbnail.src = window[img].src;

Though the preload script could be enhanced to easily support adding of images

katlees
10-17-2003, 03:05 PM
I still get object expected. I did find a " missing in the javascript and have added that. But still get the error.

sciguyryan
10-18-2003, 10:32 AM
Ok, got it to work, here is the code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>JS1</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
Image1 = new Image(120,90)
Image1.src = "desk1.gif"
Image2 = new Image(120,90)
Image2.src = "desk2.gif"
Image3 = new Image(120,90)
Image3.src = "desk3.gif"
Image4 = new Image(120,90)
Image4.src = "desk4.gif"
function loadCatch(list)
{
var img = list.options[list.selectedIndex].value
document.thumbnail.src = eval(img + ".src")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
<FORM ACTION="">
<SELECT NAME="catch" onChange="loadCatch(this)">
<OPTION VALUE="Image1" SELECTED>Bands
<OPTION VALUE="Image2">Clips
<OPTION VALUE="Image3">Lamp
<OPTION VALUE="Image4">Else
</SELECT>
</FORM>
</BODY>
</HTML>

glenngv
10-18-2003, 03:07 PM
That would work..but eval() (http://www.codingforums.com/showthread.php?s=&threadid=20143) is unnecessary. It could be changed to:

document.thumbnail.src = window[img].src;

katlees
10-20-2003, 03:09 PM
Thank you. That worked great. I appreciate the help.

wiggy
08-13-2009, 10:52 PM
Hi
This is my first post here,

I have used this code above to change an image on a 3 page form i have on my site, it works superb all apart from when you click the back button to go to a previous page, the form stays on the correct selection but the image defaults back to the default image, is there an alteration that can be made to over come this small problem?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum