Bildauswahl mit Javascript - Geht's auch doppelt?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von ThePaul, 05.02.2007.

  1. ThePaul

    ThePaul Thread Starter MacUser Mitglied

    Beiträge:
    363
    Zustimmungen:
    2
    MacUser seit:
    07.01.2003
    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>
     
  2. JohnP

    JohnP MacUser Mitglied

    Beiträge:
    471
    Zustimmungen:
    6
    MacUser seit:
    12.10.2004
    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>
    
     
  3. koli.bri

    koli.bri Gast

    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
     
  4. ThePaul

    ThePaul Thread Starter MacUser Mitglied

    Beiträge:
    363
    Zustimmungen:
    2
    MacUser seit:
    07.01.2003
    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!!! :)
     
Die Seite wird geladen...