如何使用JavaScript来交换带选项更改的图像？

我需要使JavaScript代码交换图像与选项更改。下面是代码：如何使用JavaScript来交换带选项更改的图像？

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

我的问题是这样的：我需要在纯文本，如“黑色/ Yelow /红”不是一个URL选项的值，因为这个选项值将在检查中显示出页。有谁能够帮助我？

来源

2010-03-04 neko

从您的色彩选择到的URL建立一个映射可能的工作，我想。

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

来源

2010-03-04 20:32:30 Phil

完美！谢谢菲尔！太好了！你是最棒的！ – neko 2010-03-04 20:52:06

使用的选项另一个属性：

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

然后得到该属性与getAttribute("rel")

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

来源

2010-03-04 20:25:54 Joel

嗨，乔尔我按照你的建议做了这个。但由于某些原因这是行不通的。我做错了什么？ – neko 2010-03-04 20:45:56

它实际上不应该是'this.getAttribute（'rel'）'而是'this.options [this.selectedIndex] .getAttribute（'rel'）'。我的错。 – Joel 2010-03-04 22:14:51

您可以使用CSS并根据选择更改类。然后你的所有URL都在样式表中。

CSS：

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

HTML/JS：

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

来源

2010-03-04 20:33:07

这对我的作品。

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

来源

2010-03-04 20:45:54 Cheeso

如何使用JavaScript来交换带选项更改的图像？

回答

相关问题