Question

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

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

任何帮助将不胜感激！

由于

编辑：此图片以视觉方式解释了我试图实现的结果 - http://imgur.com/TKlN8i0

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

Answer 1

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

EG：

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();

Answer 2

试试这个

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);
};

Answer 3

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

};

下拉框更改两个图像

3 个答案: