Use a Select Box to change an image

[bgreenhouse]

Hi there

I'm trying to change an image (named card) depending on the selection from an pull-down list in a form. Here is the code I'm trying to use, I'm using two functions "initialize", which preloads the images into the cache, and "cardimages", which I hope changes the src of the "card" image. "Initialize" is called onLoad, and "cardimages" is called onChange in the select tag (onChange="cardimages()&quot. I know there's fancier ways to do this with arrays, etc.. but I'm new to JavaScript, and thought that this might be easier (I'd used a similar layout for form validation that worked well). Any suggestions would be helpful!


function initialize() {
var cardimage1 = new Image();
var cardimage2 = new Image();
var cardimage3 = new Image();
var cardimage4 = new Image();
var cardimage5 = new Image();

cardimage1.src = "images/cards/canoe.gif";
cardimage2.src = "images/cards/dolphin.gif";
cardimage3.src = "images/cards/lightning.gif";
cardimage4.src = "images/cards/moon.gif";
cardimage5.src = "images/cards/sunflower.gif";
}

function cardimages() {

form = document.forms.cardselect
cardimage = document.images.card

if (form.background.options.value =="moon&quot
{
cardimage.src = cardimage4.src;
return;
}

if
(form.background.value == "canoe&quot
{
cardimage.src = cardimage1.src;
return;
}

if (form.background.value == "sunflower&quot
{
cardimage.src = cardimage5;
return;
}

if (form.background.value == "dolphin&quot
{
cardimage.src = cardimage2.src;
return;
}

if (form.background.value == "lightning&quot
{
cardimage.src = cardimage3.src;
return;
}


}

 

[jaredn]

if (form.background.value == "sunflower&quot
{
cardimage.src = cardimage5.src;
return;
}


this line is different than your other ones... what is occuring... also you can just do it like this:
<select onChange=&quot;changeImg(this.value)&quot;>

function changeImg(val)
{
myimg.src=&quot;path/&quot;+val
}

jared@aauser.com

 

[bgreenhouse]

Hi Jared

what's happening is nothing. I get no error messages or anything. That omission was well noticed, but it doesn't make a difference. Your suggestion is interesting. Like I said, I'm new to JavaScript...Could you explain to me what it means? Do I need to call the function with something within the brackets (i.e. onChange = &quot;changeImg(val)&quot, or can I just call it with nothing in the brackets? I have more experience in VbScript, but was hoping to do this in Java Script.

thanks!

Ben

 

[bgreenhouse]

Alright, I've changed it to this:

function cardimages(val) {

cardimage = document.images.card

cardimage.src = &quot;images/cards/&quot;+val+&quot;.gif&quot;
}

with the call 'onChange=&quot;cardimages(this.value)&quot;'

and it worked!

Thanks Jared

 

[bgreenhouse]

Okay, one more thing...

That code doesn't work in Netscape. Anyone have ideas for one that would?

Thanks

Ben

 

[jaredn]

dont worry about netscape it is sometimes hard to work with.

jared@aauser.com

 

[bgreenhouse]

Well, be that as it may, I need to have a page that all my users can access (regardless of their taste in browsers). Any suggestions?

 

[jaredn]

<script>
function cardImages() {
thebox=document.frm.netscapesux
numval=thebox.selectedIndex
theval=thebox.options[numval].value
cardimage = document.images.fut
cardimage.src = &quot;images/cards/&quot;+theval+&quot;.gif&quot;
}
//
</script>
<form name=&quot;frm&quot;>
<select name=&quot;netscapesux&quot; onChange=&quot;cardImages()&quot;>
<option value=&quot;pants&quot;>pants
<option value=&quot;dance&quot;>x
<option value=&quot;Richard-0&quot;>Richard-0
<option value=&quot;ants-3&quot;>ants-3
</select></form>
<img name=&quot;fut&quot;> jared@aauser.com

 

[jaredn]

i just whipped up the above script... i hate netscape but i understand your point
you know last i checked according to a poll 80%+ used IE jared@aauser.com

 

[crystalized]

You might also want to take a look at dynamicdrive.com they have a script freely available that does what you describe. I can't remember off hand if it works on both browsers or not, but it might be worth looking at.
Crystal
crystalized_s@yahoo.com

--------------------------------------------------

Experience is one thing you can't get for nothing.

-Oscar Wilde