How to use javascript to swap images with option change?_问答_开发者

How to use javascript to swap images with option change?

开发者 https://www.devze.com 2022-12-22 11:15 出处：网络

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;

相关专题：javascript

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 anybo开发者_开发知识库dy help me?

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">

Use another attribute on the option:

<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>

Then get that attribute with getAttribute("rel")

<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">

You could use CSS and just change the class based upon the selection. Then all of your URL's are in a stylesheet.

CSS:

.red
{
background: url(red.gif) no-repeat;
}

HTML/JS:

<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">

This works for me.

<HTML>
  <head>
    <TITLE>Image Select Test</TITLE>
    <script type="text/javascript" language='javascript'>

      function flip() {
          myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url');
      }

    </script>
  </head>

  <body>
    <form>
      Select an image:<br/>
      <select id="ColorSelect" onchange="javascript:flip();">
        <option url="images/0.png"  value='Zero'>Zero</option>
        <option url="images/1.png"  value='One'>One</option>
        <option url="images/2.png"  value='Two'>Two</option>
        <option url="images/3.png"  value='Three'>Three</option>
        <option url="images/4.png"  value='Four'>Four</option>
      </select>

    </form>

    <img src="images/unknown.png" id="myimage"/>

  </body>

  <script type="text/javascript" language='javascript'>
      // place this after <body> to run it after body has loaded.
      var myimage = document.getElementById('myimage');
      var ColorSelect= document.getElementById('ColorSelect');
  </script>

</HTML>

ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); does not work.

It is rather ColorSelect.options[ColorSelect.selectedIndex].getAttribute('url');