下拉框更改两个图像

Dropdown box changes two images

本文关键字：两个 图像      更新时间：2023-09-26

我有一个项目，其中我有一个下拉框，用于选择交通摄像头的实时流。我有这部分工作。但是，由于此选择是从下拉框中进行的，因此需要在显示照相机流的同时显示地图图像。这是我的问题。

这就是我目前所拥有的。我的问题是我可以为每个选项值附加第二个图像链接，以便在进行每个选择时并排显示两个而不是当前的一个？

任何帮助将不胜感激！

谢谢

编辑：这张图片直观地解释了我试图实现的结果 - https://i.stack.imgur.com/oVzDn.jpg

<iframe src="http://mapsengine.google.com/map/embed?mid=zqYRscs82GEY.kUSSEtK8gKbg" width="640" height="480"></iframe>

这是我尝试使用相机流显示的嵌入式地图代码的示例

<html>
<body>
<img id="imageToSwap" src="http://deladream.com/wp-content/uploads/2010/11/1984.jpg" />
<br/><br/>
<select id="dd" onChange="swapImage()">
<option value="http://deladream.com/wp-content/uploads/2010/11/1984.jpg">None Selected</option>
<option value="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath=Metropolitan/Upper_MtGravatt_Pac_Mwy_Nth.jpg&35170044">Upper Mount Gravatt - Pacific Motorway and Klumpp Road (North)</option>
<option value="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath='Metropolitan'MRMETRO-1224.jpg&78465240">Kenmore - Moggill Road - Kenmore Road (East)</option>
<option value="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath='Metropolitan'MRMETRO-1213.jpg&2039636175">Chermside - Gympie Road - Webster Road (South-East)</option>
<option value="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath='Metropolitan'MRMETRO-1214.jpg&2144911343">Woolloongabba - Pacific Motorway</option>
<option value="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath='Metropolitan'MRMETRO-1458.jpg&1568524335">Archerfield - Beaudesert Road and Granard Road (East)</option>
<option value="http://www.cctv.com/Library/dcs_tag.js">Chinese Pandas</option>
</select>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value;    
};
</script>
</body>
</html>

在运行时通过新的 Image（）; 对象加载图像

例如： 

function loadAllPreImages(){
images = new Array();
images[0]="images/resort.jpg"
images[1]="images/accomodation.jpg"
images[2]="images/weekendgetaways.jpg"
images[3]="images/domesticvacation.jpg"
images[4]="images/internationalvacation.jpg"
images[5]="images/Beauty.jpg"
images[6]="images/Food.jpg"
images[7]="images/Entertainment.jpg"
images[8]="images/Health.jpg"
images[9]="images/Services.jpg"
var i = 0;
for(i=0; i<10; i++)
{   imageelmentObj = new Image();
    images[i] = imageelmentObj.src=images[i];
}
}
loadAllPreImages();

试试这个 

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value; 
    var new_image = document.createElement("img");
    new_image .setAttribute("src") = dropd.value;
    image.parentNode.appendChild(new_image);
};

u can try using a map
var arr = [];
arr['http://deladream.com/wp-content/uploads/2010/11/1984.jpg'] = '//another image link';

//create a map with all d options..

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var image2 = document.getElementById("image2ToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value;    
    image2.src=arr[dropd.value];
};
相关文章：