Home/ Questions/Q 644939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T21:26:52+00:00

I need to make javascript code to swap images with option change. Here is

  • 0

I need to make javascript code to swap images with option change.
Here is the code:

<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>

<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">

My problem is this: I need to have option values in plain text such as “Black/Yelow/Red” not a URL because this option value will show up in the check out page. Can anybody help me?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Setting up a mapping from your color options to the URLs might work, I think.

    <script>
var colorUrlMap = {
    "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
    //Add more here
    "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>


<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
    • 0