Frank: zwei überlagernde Bilder

Hallo zusammen,
ich möchte vorab sagen,dass ich noch nicht so viel Erfahrung habe mit html,javascript usw. aber ich bin festen Willens ein Projekt
zu realisieren und hoffe auf eure Hilfe.Was ich vor habe,gibt es schon,aber ich weiss nicht wie es gemacht wurde.Schaut es euch am besten einmal an.

http://www.eunos.com/keith/stripes/machine/java/index.html

Ich kann zwar verschiedene Bilder aus einer Liste auswählen,aber
es scheitert bei zwei überlagernden Bildern die getrennt auswählbar
sind,sprich Farbe Auto,Farbe Streifen.

  1. Hallo,
    so wie ich dich verstanden habe, willst du mit Javascript so was ähnliches wie auf der Seite, auf die du verlinkt hast, machen willst?

    Dir ist schon klar, dass Java und JavaScript was völlig verschiedenes sind?

    Ein bisschen Quellcode wäre schön... :-)

    MfG

    1. Hallo,
      so wie ich dich verstanden habe, willst du mit Javascript so was ähnliches wie auf der Seite, auf die du verlinkt hast, machen willst?

      Ich möchte sogar genau das gleiche machen(-:

      Dir ist schon klar, dass Java und JavaScript was völlig verschiedenes sind?

      ***öhh rotwerd nöö***

      Ein bisschen Quellcode wäre schön... :-)

      Wie gesagt soweit das ich verschiedene Bilder(farbige Autos)
      aufrufen kann bin ich.Nur habe ich noch garkeinen Ansatz wie
      ich die Streifen in das gleiche Bild bekomme.

      MfG

      1. Hallo,
        so wie ich dich verstanden habe, willst du mit Javascript so was ähnliches wie auf der Seite, auf die du verlinkt hast, machen willst?

        Ich möchte sogar genau das gleiche machen(-:

        ZoomZoom!  :-)

        Wie gesagt soweit das ich verschiedene Bilder(farbige Autos)
        aufrufen kann bin ich.Nur habe ich noch garkeinen Ansatz wie
        ich die Streifen in das gleiche Bild bekomme.

        Anders als in der Beispiellösung (Java...) sollte sich so etwas doch tatsächlich mit Javascript, CSS (z-index) und einem transparenten Streifenbild lösen lassen... Wobei der IE nicht alle Bilder (PNG?) transparent darstellt, die FF ordnungsgemäß transparent zeigt.

        1. Hallo!

          Wobei der IE nicht alle Bilder (PNG?) transparent darstellt, die FF ordnungsgemäß transparent zeigt.

          Der 7er AFAIK schon. Und für den 6er gibt's auch Lösungen.

          ciao, ww

          --
          Schäuble:
            "Wir können alles. Außer Rechtsstaat."
          1. Super! danke für den Tipp.Teiltransparenz mit opacity funktioniert
            genau wie ich es mir vorgestellt habe.Zumindest sieht das statische Bild so aus wie ich es wollte.

            Jetz muss ich aber noch eine Lösung finden,wie ich mehrere Voder-und
            Hintergrundbilder getrennt von einander in einer Liste aufrufen kann.

            Hallo!

            Wobei der IE nicht alle Bilder (PNG?) transparent darstellt, die FF ordnungsgemäß transparent zeigt.

            Der 7er AFAIK schon. Und für den 6er gibt's auch Lösungen.

            ciao, ww

            1. Hallo!

              Jetz muss ich aber noch eine Lösung finden,wie ich mehrere Voder-und
              Hintergrundbilder getrennt von einander in einer Liste aufrufen kann.

              Du musst herausfinden, ob ein bestimmter Eintrag selektiert wurde. Darauf tauscht du dann das Bild gegen das richtige aus.

              ciao, ww

              --
              Schäuble:
                "Wir können alles. Außer Rechtsstaat."
              1. Ich habe jetzt ein paar Tage einiges probiert,aber ich komme nicht weiter.Ich bin jetzt soweit,dass es bei dem ersten Bild funktioniert.Da lassen sich die darüber gelagerten gif`s tauschen.
                Sobald ich aber das untere Bild wechsel,sind die gif´s darüber wieder verdeckt.Es scheintso,dass die unten liegenden Bilder nicht getauscht sondern oben drauf gelegt werden.

                Du musst herausfinden, ob ein bestimmter Eintrag selektiert wurde. Darauf tauscht du dann das Bild gegen das richtige aus.

                ciao, ww

                1. Hallo!

                  Ich habe jetzt ein paar Tage einiges probiert,aber ich komme nicht weiter.Ich bin jetzt soweit,dass es bei dem ersten Bild funktioniert.Da lassen sich die darüber gelagerten gif`s tauschen.
                  Sobald ich aber das untere Bild wechsel,sind die gif´s darüber wieder verdeckt.Es scheintso,dass die unten liegenden Bilder nicht getauscht sondern oben drauf gelegt werden.

                  Zeige Code. Poste einen Link. Dann sehen wir weiter.

                  ciao, ww

                  --
                  Schäuble:
                    "Wir können alles. Außer Rechtsstaat."
                  1. Hi,eventuell ist es völliger murgs,abber besser habe ich es nicht
                    hin bekommen.Die oben liegenden gif´s sind übrigens ausgeschnitten und haben einen transparenten Hintergrund.Wie gesagt,ich würde gerne beide Ebenen getrennt won einander auswählen können ohne das etwas verdeckt wird.

                    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
                    <html>
                    <head>

                    <style type="text/css">
                    <!--
                    a {
                    font-family:verdana,arial,helvetica;
                    font-size:10px;
                    font-weight:normal;
                    text-decoration:none;
                    color: #0050A0;
                    text-transform: uppercase;
                    }
                    a:hover {
                    color:#FF0099;
                    }
                    a:visited {
                    color:#0050A0;
                    }
                    td {
                    font-family:verdana,arial,helvetica;
                    font-size:12px;
                    font-weight:normal;
                    text-decoration:none;
                    color: #000000;
                    }
                    p {
                    font-family:verdana,arial,helvetica;
                    font-size:12px;
                    font-weight:normal;
                    text-decoration:none;
                    color: #000000;
                    }
                    ol {
                    font-family:verdana,arial,helvetica;
                    font-size:12px;
                    font-weight:normal;
                    text-decoration:none;
                    color: #000000;
                    }
                    li {
                    font-family:verdana,arial,helvetica;
                    font-size:12px;
                    font-weight:normal;
                    text-decoration:none;
                    color: #003080;
                    }
                    pre {
                    font-family: monospace;
                    color: #0000FF;
                    }
                    #Layer1 {
                     position:absolute;
                     width:600px;
                     height:450px;
                     z-index:1;
                     left: 171px;
                     top: 46px;
                    }
                    #Layer2 {
                     position:absolute;
                     width:709px;
                     height:485px;
                     z-index:1;
                     top: 100px;
                     left: 115px;
                    }
                    -->
                    </style>

                    <script type="text/javascript" language="JavaScript">
                    <!-- Begin
                    function zeigeBild(sel) {
                    document.bild unten.src = "" + sel.options[sel.selectedIndex].value;
                    }
                    function zeigeBild(sel) {
                    document.bild oben.src = "" + sel.options[sel.selectedIndex].value;
                    }

                    //  End -->
                    </script>
                    </head>
                    <body>

                    <div align="center">
                      <form name="bildwahl">
                        <div id="Layer2"><img name="bild unten" src="Bild unten 1.jpg" width="600" height="450" border="1"></div>

                    <div align="left">
                    <select name="selbox" size=1 onChange="zeigeBild(this)">
                              <option value="Bild unten 1.jpg">rot
                        <option value="Bild unten 2.jpg">blau
                              <option value="Bild unten 3.jpg">gelb
                     </select></form>
                    </div>

                    <form name="bildwahl">
                    <div id="Layer2"><img name="bild oben"src="Bild oben schwarz.gif" width="600" height="450" border="1"></div>
                     <div align="left">
                            <select name="selbox" size=1 onChange="zeigeBild(this)">
                           <option value="Bild oben schwarz.gif">Streifen schwarz
                              <option value="Bild oben weiss.gif">Streifen weiss

                    </select></form>
                    <br>

                    <br><br>
                    </td></tr></table>

                    </body></html>

                    Zeige Code. Poste einen Link. Dann sehen wir weiter.

                    ciao, ww

                    1. Hallo!

                      document.bild unten

                      Ich bin mir nicht so ganz sicher, ob das totaler Quatsch ist, oder nicht. Aber benütze lieber Unterstriche (_) als Leerzeichen.

                      Weiterhin fällt mir auf:

                        
                      function zeigeBild(sel) {  
                        document.bild unten.src = "" + sel.options[sel.selectedIndex].value;  
                      }  
                      function zeigeBild(sel) {  
                        document.bild oben.src = "" + sel.options[sel.selectedIndex].value;  
                      }  
                      
                      

                      Welche Funktion soll jetzt von JavaScript ausgewählt werden? Du hast ja für beide den gleichen Namen gewählt. Nenne die Funktionen lieber zeigeBild_unten und zeigeBild_oben.

                      Außerdem ist soetwas nicht schlimm, aber sinnfrei.

                        
                      "" + sel.options[sel.selectedIndex].value;  
                      
                      

                      Du kannst einfach die Anführungszeichen und das Pluszeichen weglassen.

                      ciao, ww

                      --
                      Schäuble:
                        "Wir können alles. Außer Rechtsstaat."
                      1. Super!!! nun funktioniert es.
                        Da ich zunächst nur ein Auswahlfenster hatte,habe ich die Funktion einfach kopiert.Ich dachte,dass die Unterscheidung in der Klammer statt findet {document.bild_unten.src = sel.option[sel.selectedIndex].value;} und hatte nur dort umbenannt.

                        Ich danke dir vielmals für deine Hilfe,sont hätte ich es nicht
                        auf die Reihe bekommen.

      2. Hallo!

        Dir ist schon klar, dass Java und JavaScript was völlig verschiedenes sind?

        ***öhh rotwerd nöö***

        Java und JavaScript. Die haben außer den ersten 4 Buchstaben nichts gemeinsam.

        Nur habe ich noch garkeinen Ansatz wie ich die Streifen in das gleiche Bild bekomme.

        Du könntest ein teiltransparentes Bild über die Autos legen. Die Streifen sind nicht durchsichtig. Der Rest schon, sonst sieht man ja das Auto nicht mehr ;-)

        ciao, ww

        --
        Schäuble:
          "Wir können alles. Außer Rechtsstaat."
  2. »»

    http://www.eunos.com/keith/stripes/machine/java/index.html

    There's a funny little "feature" of Internet Explorer.

    Sorry, ich würde ja gerne helfen, aber ich kann die "IE-Features" im Firefox unter Linux leider nicht sehen (Java habe ich installiert, hilft aber nichts). :-(
    Eine genauere Beschreibung deines Vorhabens wäre schon schön. Vielleicht gibt es ja auch eine Browserübergreifende Lösung?

    1. Ok ich versuch es zu beschreiben.Stell dir vor du hättest einen roten PKW und du würdest gerne wissen wie dieser in blau,gelb oder grün aussieht.Das möchte ich als Simulator erstellen.Es soll ein Bild von einem PKW zu sehen sein und darunter ein Auswahlmenü für die farben.Je nach auswahl soll der PKW in der entsprechenden Farbe dargestellt werden.Soweit habe ich es geschafft.Aber nun sollen in dem gleichen Bild,auf dem PKW auch noch farbige Streifen dargestellt
      werden,die ebenfalls auswählbar sein sollen.Meine Idee war zwei Bilder übereinander legen.Unten das Auto,darüber die Streifen.Es wird bei meinem Versuch aber immer ein Bild verdeckt,obwohl die Streifen einen transparenten Hintergrund haben.

      »»

      http://www.eunos.com/keith/stripes/machine/java/index.html

      There's a funny little "feature" of Internet Explorer.

      Sorry, ich würde ja gerne helfen, aber ich kann die "IE-Features" im Firefox unter Linux leider nicht sehen (Java habe ich installiert, hilft aber nichts). :-(
      Eine genauere Beschreibung deines Vorhabens wäre schon schön. Vielleicht gibt es ja auch eine Browserübergreifende Lösung?