5 replies to this topic

[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.

[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.

[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.