Bildauswahl mit Javascript - Geht's auch doppelt?

ThePaul

Mitglied
Thread Starter
Registriert
07.01.2003
Beiträge
385
Ich hoffe, ihr könnt mit der Überschrift etwas anfangen, denn ich wusste nicht, wie ich es noch besser erklären kann! :) Aber jetzt zu meinem Problem:

Da gibt es einen typischen kleinen JavaScript, der mir auf meiner WebSite ein Pulldown-Menue zeigt. In diesem Menue suche ich mir einen Bildernamen aus und anschliessend wird das Bild angezeigt. Was muss ich anstellen, um auf der selben Seite ZWEI dieser Pulldown-Menues zu bekommen? (Einfaches kopieren klappt nicht!) Irgendwie muss man dem Script beibringen, dass es zwei unterschiedliche Tabellen sind... ich weiss nur nicht wie!

...und hier noch der Script (für ein Pulldown-Menue).
Ganz offiziell von Dr.Web!

_______________________________________________________

<html>
<head>
<title>Bildwahl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body bgcolor="#FFFFFF" text="#000000">
<script language="javascript">
<!--
function zeigeBilder()
{
document.images.pictures.src=document.meineGalerie.fotos.options[document.meineGalerie.fotos.selectedIndex].value
}
//-->
</script>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form name="meineGalerie">
<p>
<select
name="fotos" onChange="zeigeBilder()" size="1">
<option value="images/leucht1.jpg">zeige Bild 1</option>
<option value="images/leucht2.jpg">zeige Bild 2</option>
<option value="images/leucht3.jpg">zeige Bild 3</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center"><img src="images/leucht1.jpg" name="pictures" width="84"
height="84" border="1">
</td>
</tr>
</table>
</body>
</html>
 

JohnP

Mitglied
Registriert
12.10.2004
Beiträge
472
Probier das mal:

Code:
 <html>
 <head>
 <title>Bildwahl</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <body bgcolor="#FFFFFF" text="#000000">
 <script language="javascript">
 <!--
 function zeigeBilder()
 {
 document.images.pictures.src=document.meineGalerie.fotos.options[document.meineGalerie.fotos.selectedIndex].value
 }
 //-->
 </script>
 <table cellspacing="0" cellpadding="0">
 <tr> 
 <td width="100%"> 
 <form name="meineGalerie">
 <p> 
 <select name="fotos" onChange="zeigeBilder()" size="1">
 <option value="images/leucht1.jpg">zeige Bild 1</option>
 <option value="images/leucht2.jpg">zeige Bild 2</option>
 <option value="images/leucht3.jpg">zeige Bild 3</option>
 </select>
 </p>
 </form>
 </td>
 <td width="100%"> 
 <form name="meineGalerie2">
 <p> 
 <select name="fotos" onChange="zeigeBilder()" size="1">
 <option value="images/leucht1.jpg">zeige Bild 1</option>
 <option value="images/leucht2.jpg">zeige Bild 2</option>
 <option value="images/leucht3.jpg">zeige Bild 3</option>
 </select>
 </p>
 </form>
 </td>
 </tr>
 <tr> 
 <td width="100%"> 
 <p align="center"><img src="images/leucht1.jpg" name="pictures" width="84" height="84" border="1"> 
 </td>
 </tr>
 </table>
 </body>
 </html>
 
K

koli.bri

Zuersteinmal geben wir der Funktion das Value-Paramter mit
Code:
function zeigebilder(bildurl){...}
Zudem dann noch eine kleine Änderrung in dem Formuar und dem Eventaufruf:
Code:
<select name="fotos" onChange="zeigeBilder(this)" size="1">

Das hat den Vorteil, das Du in der Funktion nicht mehr auf das "Select"-Objekt zugreifen muss.
So kannst Du auf die Absolute Angabe verzichten, und die Funktion auch an andere Stellen ohne Änderrungen verwenden.

Willst Du zudem auch noch einen zweiten Bereich, wo die bilder sind, würd ich das so machen:
Die funktion bekommt einen zweiten Parameter "bildplatz".
Die Zuordnung der neuen URL würde ich dann über
Code:
getElementByID("bild" + bildplatz)
machen, also die ID des img-Tags, dessen Bild ausgetauscht ist direkt ansprrechen. wichtig hierbei, das die entsprechenden IMG-Tags durchnumeriert sind, und bei de, Funktionsaufruf noch der Paramter mit angebenen wird
Code:
<select name="fotos" onChange="zeigeBilder(this,2)" size="1">
<!-- Tauscht zweites Bild aus -->


gruß
Lukas
 

ThePaul

Mitglied
Thread Starter
Registriert
07.01.2003
Beiträge
385
Vielen Dank für eure Hilfe, aber so wie ich mir das vorgestellt habe, hat es dann doch nicht geklappt. Hab's jetzt per Flash geregelt...
Trotzdem nochmal Danke!!! :)
 
Oben Unten