Javascript dropdown menu onChange image src

[james909]

I have the following Javascript that changes the images on screen as the dropdown menu chages:

Javascript

Code:

function hullchangeimage()
{
if (!document.images)
return
document.images.hullpicture.src=
document.hullgallery.changehull.options[document.hullgallery.changehull.selectedIndex].value
}

HTML Dropdown Menu:

Code:

<form name="hullgallery">
<select name="changehull" size="1" onChange="hullchangeimage()">
<OPTION value="Hull1">Hull1</option>
<OPTION value="Hull2">Hull2</option>
<OPTION value="Hull3">Hull3</option>
</select>
</form>

HTML image SRC:

Code:

<img class="hullbuild" src="build_pics/Hull1.png" name="hullpicture" width="500" height="250">

Problem is: this makes the picture the value of the select box, which for example is "Hull2", but the image scr is "build_pics/Hull2.png", so how do I add .png to the end of the value, and the folder infront, in the javascript. I can't change the values in the select options by adding .png as the value are needed for another function that requires just the value.

[.josh]

At face value it sounds like you just need to do some basic string concatenation..

 

document.images.hullpicture.src= 'build_pics/'+document.hullgallery.changehull.options[document.hullgallery.changehull.selectedIndex].value+'.png';

[Psycho]

FYI: You can make your life a little easier and pass a reference to the select field to the function

 

 

<select name="changehull" size="1" onChange="hullchangeimage(this);">

 

You can then simplify your function like so

 

function hullchangeimage(selectObj)
{
    if (!document.images) { return; }
    var imgName = selectObj.options[selectObj.selectedIndex].value;
    document.images.hullpicture.src = 'build_pics/' + imgName + '.png';
}