La liste déroulante change deux images

J'ai un projet où j'ai une liste déroulante qui sélectionne un flux en direct d'une caméra de la circulation. J'ai cette partie qui fonctionne. Cependant, comme cette sélection est faite à partir de la liste déroulante, une image de carte doit être affichée en même temps que le flux de caméra est affiché. C'est mon problème.La liste déroulante change deux images

C'est ce que j'ai jusqu'à présent. Mes questions sont: est-ce que je peux attacher un deuxième lien d'image à chaque valeur d'option ainsi quand chaque sélection est faite elle montre les deux côte à côte au lieu de celui qu'elle est actuellement?

Toute aide serait grandement appréciée!

Merci

Edit: Cette image explique le résultat visuellement que je tente de réaliser - http://imgur.com/TKlN8i0

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

C'est un exemple du code de carte intégré que je suis en train de représenterez avec l'appareil photo ruisseaux

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

Source

2013-10-08 user2857205

si vous voulez avoir 2 images montrant la même image – bhb

Je veux afficher deux images côte à côte avec une sélection . http://imgur.com/TKlN8i0 cela montre exactement le résultat im après. Mon code n'affiche actuellement que le flux de la caméra – user2857205

Chargez vos images à l'exécution par une nouvelle image(); objet

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

Source

2013-10-08 05:53:39 martian

si vous utilisez un code aléatoire au moins changer/l'adapter pour qu'il fonctionne dans OP, en plus ce n'est pas ce qu'il a demandé – jycr753

Essayez cette

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

Source

2013-10-08 05:54:30 bhb

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

};

Source

2013-10-08 05:58:03 Shashank

La liste déroulante change deux images

Répondre

Questions connexes