Change image url with dropdown selection

[Hrimthurs]

Hi there,
I am currently trying to find out how to alter parts of an image url through the selection of a dropdown.
I have something where the first dropdown changes the entire url:

<script language="javascript">
<!--
function ShowPic(sImage)
{
   document.ShowRoom.src = sImage;
}
// -->
</script> 
<form name="proof">
  <select name="design"  onChange="ShowPic(this.value)">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <select name="style">
    <option value="a">Option a</option>
    <option value="b">Option b</option>
  </select>
  <select name="finish">
    <option value="z">Option z</option>
    <option value="y">Option y</option>
  </select>
</form>
<img name="ShowRoom" src="images/outsidefront.jpg">

But I need to change parts of the url depending on the 3 chosen options on the 3 dropdowns.

<img src="http://www.domain.com/images/+variable++variable2++variable3+.jpg" />

Does anyone know a way to do this.

[Jordan]

So right now when a user clicks on option 2 your ShowPic() function is executed. Which then assigns the value of the selection to a variable and changes the ShowRoom picture. The problem is the value is 2. So

>> Clicks 2
ShowPic(2);
document.ShowRoom.src = 2
URL of picture = 2.

Basically you just need to append the "images/variableXX.jpg" to the src. Here is how:

<script language="javascript">
<!--
function ShowPic(sImage)
{
   document.ShowRoom.src = "images/variable" + sImage + ".jpg";
}
// -->
</script>

An easier option would be to just change the value of your select. For Example:

<option value="images/variable1.jpg">Option 1</option>

[Hrimthurs]

Wow, thanks.
That solved an issue I didn't think about.
What I need to do now is something like the following.

<script language="javascript">
<!--
function ShowPic(sImage)
{
   function ShowPic2(sImage2)
   {
      function ShowPic3(sImage3)
      {
         document.ShowRoom.src = "images/variable" + sImage + sImage2 + sImage3 + ".jpg";
      }
   }
}
// -->
</script>
<form name="proof">
  <select name="design"  onChange="ShowPic(this.value)">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <select name="style" onChange="ShowPic2(this.value)">
    <option value="a">Option a</option>
    <option value="b">Option b</option>
  </select>
  <select name="finish" onChange="ShowPic3(this.value)">
    <option value="z">Option z</option>
    <option value="y">Option y</option>
  </select>
</form>
<img name="ShowRoom" src="images/1az.jpg">

So I'd get an out put of something like:

<img name="ShowRoom" src="images/2by.jpg">

Except that script won't work.

[Jordan]

Here is an easier way to do what you want:

<script language="javascript">
<!--
function ShowPic()
{
    // Get the select values
    var design = document.proof.design.options[document.proof.design.selectedIndex].value; 
    var style = document.proof.style.options[document.proof.style.selectedIndex].value; 
    var finish = document.proof.finish.options[document.finish.design.selectedIndex].value; 
  
    // Create our Image
    var sImage = "http://forum.codecall.net/images/variable" + design + style + finish + ".jpg";

    // Assign the image
   document.ShowRoom.src = sImage;
}
// -->
</script>
<form name="proof">
  <select name="design"  onChange="ShowPic()">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <select name="style" onChange="ShowPic()">
    <option value="a">Option a</option>
    <option value="b">Option b</option>
  </select>
  <select name="finish" onChange="ShowPic()">
    <option value="z">Option z</option>
    <option value="y">Option y</option>
  </select>
</form>
<img name="ShowRoom" src="http://forum.codecall.net/images/1az.jpg">

Please note that I did not test this....

[Hrimthurs]

Thanks!
I've tweaked that a bit and got it working perfectly.

<script language="javascript">
<!--
function ShowPic(sImage)
{
    // Get the select values
    var design = document.proof.design.options[document.proof.design.selectedIndex].value; 
    var style = document.proof.style.options[document.proof.style.selectedIndex].value; 
    var finish = document.proof.finish.options[document.proof.finish.selectedIndex].value; 
  
    // Create our Image
    var sImage = "images/" + design + style + finish + ".jpg";

    // Assign the image
   document.ShowRoom.src = sImage;
}
// -->
</script>
<form name="proof">
  <select name="design"  onChange="ShowPic()">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <select name="style" onChange="ShowPic()">
    <option value="a">Option a</option>
    <option value="b">Option b</option>
  </select>
  <select name="finish" onChange="ShowPic()">
    <option value="z">Option z</option>
    <option value="y">Option y</option>
  </select>
</form>
<img name="ShowRoom" src="images/1az.jpg">

Thanks for your help.

[Jordan]

I see, I'm not sure how "http://forum.codecall.net/images/" got into the sImage variable but I am glad it works! Feel free to post any more questions you have.