从一个下拉菜单中显示多张图像

debugcn 发表于 Dev

上层国王

我正在尝试使用单独的图像同时更改多个图像。perl正在为我改变图像的路径。

function swapImage(){
var image = document.getElementById("imageToSwap");
var image2 = document.getElementById("imageToSwap2");
var image3 = document.getElementById("imageToSwap3");
var dropd = document.getElementById("dd");
image.src = dropd.value;    
    image2.src=arr[dropd.value];
    image3.src=arr[dropd.value];

};

  <select name="buttonstuff"  id="dd" onChange="swapImage()">
              <option value="http://upperboards.com/hosted/images/buttonset/but-lpurple/homepage.gif" selected>but-purple</option>
              <option value="http://upperboards.com/hosted/images/buttonset/but-red/homepage.gif">but-red</option>
               <option value="http://upperboards.com/hosted/images/buttonset/but-green/homepage.gif">but-green</option>
               </select>
               <img id="imageToSwap" src="http://upperboards.com/hosted/images/buttonset/but-lpurple/homepage.gif"/>
               <img id="imageToSwap2" src="http://upperboards.com/hosted/images/buttonset/but-lpurple/icq.gif"/>
               <img id="imageToSwap3" src="http://upperboards.com/hosted/images/buttonset/but-lpurple/aim.gif"/>

津巴布韦

由于您的图片都在同一个文件夹，您可以使用该文件夹作为value您的<option>秒。这使得更改所有图像非常简单。

HTML：

<select name="buttonstuff" id="dd" onChange="foo()">
    <option value="but-lpurple" selected>but-purple</option>
    <option value="but-red">but-red</option>
    <option value="but-green">but-green</option>
</select>

JS：

var url = 'http://upperboards.com/hosted/images/buttonset/';
function foo() {
    var colorscheme = document.getElementById("dd").value;
    document.getElementById("imageToSwap").src  = url + colorscheme + '/homepage.gif';
    document.getElementById("imageToSwap2").src = url + colorscheme + '/icq.gif';
    document.getElementById("imageToSwap3").src = url + colorscheme + '/aim.gif';
};

我已经更新了你的小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。