Bildauswahl mit Javascript - Geht's auch doppelt?

ThePaul · 05.02.2007

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

</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 · 05.02.2007

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>

koli.bri · 06.02.2007

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

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

Bildauswahl mit Javascript - Geht's auch doppelt?

ThePaul

Aktives Mitglied

JohnP

Aktives Mitglied

koli.bri

ThePaul

Aktives Mitglied