Ankündigung

Einklappen
Keine Ankündigung bisher.

Bild mittels Dropdown Menü ändern

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 Weiter
  • #1

    Bild mittels Dropdown Menü ändern

    Ich denke, dass ist ein Fall für JavaScript.
    Ich kenne mich mit JS leider Null aus und brauche deshalb Hilfe. Danke schonmal im Voraus.

    Ich habe ein Formular, in dem u.a. ein Dropdown eingebunden ist. Nun soll beim Wechsel der Auswahl ein bestimmtes Bild das irgendwo auf der Seite eingebaut ist, ausgetauscht werden. Ich denke, dass das ein Job für JS ist...

    Ich habe halt:
    HTML-Code:
    <img src="Weg zu meinem.jpg" name="Bild" />
<form method="" action="" name="myForm">
    <select size="5" name="switch">
        <option value="1">Eintrag 1</option>
        <option value="2">Eintrag 2</option>
        <option value="3">Eintrag 3</option>
        <option value="4">Eintrag 4</option>
        <option value="5">Eintrag 5</option>
    </select>
</form>
    Also ein ganz normales Formular und im "Beispiel" ist das Bild darüber.
    Ziel ist, wenn ich nun "Eintrag 1" auswähle, wird Bild rot.jpg angezeigt, wenn ich "Eintrag 2" auswähle wird Bild schwarz.jpg etc ausgewählt.
    Ich habe insgesamt 18 Bilder.

    Ich habe bisher nur "Codesnippets" gefunden wo Bilder innerhalb der Dropdownliste angezeigt werden. Das ist aber nicht mein Ziel.

    Vergleichbar mit einem Onlineshop, wo eine Jacke in verschiedenen Farben angeboten wird und das Produktbild sich ändert, wenn man eine andere Farbe auswählt.

    Wer kann mir helfen?
    Stichworte: -
  • #2
    du suchst docu mit javascript und image auf deutsch ?
    https://www.mediaevent.de/javascript/image.html

    Kommentar

    • #3
      Danke für den Link. Ich dachte es wäre nur was kleines, wo man fertige Snippets hat, da es ja so oft (gerade in Online-Shops) angewandt wird.
      Ich kenne mich mit JS nahezu gar nicht aus, schon gar nicht die korrekte Syntax. Ich nutze JS auch eigentlich nie, deshalb wollte ich nun weniger eine ganze Sprache inkl. Grundlagen lernen.

      Ich weiss, dass 50% der User auf Plattformen wie dieser nach dem Motto antworten: "Mach doch selber, hier die Anleitung". Ich hatte nur gehofft, dass jemand ein solches Snippet liegen hat, was ich für meine Bedürfnisse anpassen kann.

      Und das hat nix mit Faul sein zu tun. Es hat was mit Aufwand/Nutzen zu tun. Für einmalige Verwendung sämtliche Grundlagen zu lernen finde ich übertrieben. Bisher bin ich halt ganz gut ohne JS ausgekommen.

      Kommentar

      • #4
        Hm, was hast Du denn bitte vorher gegoogel ?
        https://www.google.com/search?q=change+imge+by+dropdown
        ja wohl nicht.

        dritter treffer code pen:
        https://codepen.io/joshwentz/pen/jEKVoz

        sorry, aber hier ist keine suchhilfe fürs netz, sonderrn ein programmierer forum.

        Kommentar

        • #5
          Das ist mir klar, dass das hier keine Suchhilfe ist. Aber dein Treffer, den verstehe ich überhaupt nicht. Mit deinem Link hatte ich jetzt folgendes zusammen-geklüppelt (Denn ich versuche ja schon, mir selbst zu helfen):

          Im <head> steht:
          HTML-Code:
          <!--
var imagesArray = [
  "/w0.jpg",
  "/w1.jpg",
  "/w2.jpg" 
];

$('#changeImage').change(function(){
  $('#image')[0].src = imagesArray[this.value];
});
-->
          und im Body habe ich folgendes:
          HTML-Code:
                      <tr><td colspan="2">
            <select id="changeImage">
            <option value="0">w0</option>
            <option value="1">w1</option>
            <option value="2">w2</option>
            </select>
            </td><td colspan="2">
            <img id="image" name="image" src="w0.jpg">
            </td></tr>
          Ist halt eine Tabelle...
          Sieht so aus, wie es soll, das Bild ändert sich aber nicht...

          Und diesen Code denke ich zu verstehen, nur wird evtl. die Syntax falsch sein.
          PS: zum Testen liegt alles in einem Verzeichnis.

          Kommentar

          • #6
            Und nun habe ich den anderen (vorgeschlagenen) Code ausprobiert... Damit zerfetze ich mit mein PHP...
            PHP-Code:
            <td>
                        <            select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
                            <            option value="w0.jpg" selected>w0</option>
                            <            option value="w1.jpg">w1</option>
                            <            option value="w2.jpg">w2</option>
                        </            select>
                        </            td>
                        <            td colspan="2">
                        <            img id="imageToSwap" class="profile" src="w0.jpg">
                        </            td> 
            Ich denke das ' hinter ochange="$( macht da was kaputt... Wie umgehe ich das?

            Kommentar

            • #7
              Vielleicht hilfreich: Ich schreibe alle in eine PHP Variable aka
              PHP-Code:
              $Form = '
              Hier steht dann das ganze Formulart
              '              ; 
              Und diese Variable nutze ich dann später mehrfach.

              Kommentar

              • #8
                Es geht halt nicht ohne Grundlagen, das ist das Problem. Sieht man an #5. Der Code dürfte an sich funktionieren, du bindest ihn aber halt nicht korrekt ein.

                1. JavaScript-Code gehört in eine separate Datei (Endung .js). Diese bindest du dann über den <script>-Tag mit ein.
                2. Der Code in #5 ist jQuery-Syntax, d.h. du musst jQuery noch mit einbinden und zwar vor "Deinem" Script.
                3. Für JS-Entwicklung (aber auch generell) solltest du Dich mit den Entwicklertools Deines Browsers bekannt machen. Dort siehst du in der Konsole wenn JS Fehler wirft.

                By the way, Tabellen als Layouthilfe sind ziemlich out (und schlicht und einfach falsch). Flexbox ist so einfach zu verstehen und anzuwenden, ich verstehe nicht weshalb es Leute gibt, welche immer noch Tabellen einsetzen.

                Kommentar

                • #9

                  zu 1: JavaScript Code kann doch auch direkt im Script Tag im Head eingebunden werden, ohne eigene Datei. Ist zwar nicht so schön.
                  zu 2: Sorry. Das jQuery habe ich wie im Beispiel von tom natürlich eingebunden.
                  zu 3: Ich weiss ja in welcher Codezeile der Fehler hängt, kann ihn aber nicht entfernen.

                  zu btw: Klar weiss ich, dass Tabellen veraltet sind. Aber es ist nicht schlicht und einfach falsch, es ist nur Out und es gibt bessere Möglichkeiten. Falsch ist es aber definitiv nicht, da das gewünschte Ergebnis erziehlt wird, wenn auch nicht elegant.

                  JS wirft halt keinen Fehler. Durch das ' im JS-Code wird meine PHP Variable beendet. Das komplette Formular wird in die Variable $Form geschrieben...

                  Kommentar

                  • #10
                    Doch, es ist falsch. Tabellen sind gemäss Standard da um tabellarische Daten darzustellen. Und nicht um zu layouten. Dafür sind im Standard explizit andere Elemente vorgesehen.

                    Wie gesagt, js in separate Datei, einbinden, verstehen, debuggen. Das ist der Weg.

                    Kommentar

                    • #11
                      Zitat von Niko83 Beitrag anzeigen

                      JS wirft halt keinen Fehler. Durch das ' im JS-Code wird meine PHP Variable beendet. Das komplette Formular wird in die Variable $Form geschrieben...
                      Und was hat das, was auch immer du da bechreibst mit dem ursprüngluichen Probelm zu tun ?
                      du wolltest ein snippet du hast ein snippet, was im netz funktioniert, eben nur bei dir nicht.

                      wie und warum sollte einer von uns zu versuchen zu debuggen was bei dir in $FORM steht ?

                      mal geraten, was du aber auch selnbst wissen dürftest was es also nicht sein kann, weil es nicht sein darf....
                      escaping

                      Kommentar

                      • #12
                        Wie soll ich JS debuggen, wenn ich einen Syntax-Fehler im PHP habe. Dann ist doch klar, dass das JS nicht läuft.
                        Und der Syntaxfehler stammt durch die Verwendung des JS Codes...

                        Ich denke das JS, das ich genutzt habe (durch die Tutorials/anderen Seiten) ist korrekt, da es auf einer "leeren Seite" funktioniert. Aber es zerhaut mir halt den PHP Code.

                        Also wenn Du nicht helfen willst, ist das OK und akzeptiere ich, dann brauchst aber auch nix zu schreiben oder anderweitig zu kritisieren. Warum kann man sich nicht einfach auf das Problem konzentrieren und muss nebenbei immer andere Dinge noch ansprechen. Klar man kann sagen: Dass musst Du so und so machen, dann läuft es und PS: Ich rate dir: Lass die Finger von Tabellen.

                        Und ich habe auch nachgelesen, dass JS nicht unbendingt in eine separate Datei MUSS. Es ist zwar schöner. Aber es hilft auch nicht beim Debuggen, da das Script nicht den Fehler verursacht, sondern die Einbindung ins Formular.

                        Kommentar

                        • #13
                          Ich hab schon verstanden wo Dein Problem liegt. Deshalb empfehle ich Dir auch diesen Weg. Weil du dann an Deinem Formular gar nichts ändern musst (Code aus #5). Und Dein Problem löst sich in Luft auf.

                          Du kannst auch verheiratet sein und Deine Affäre geheim halten. Funktioniert vielleicht. Ist aber falsch. Genauso ist es mit einem Tabellenlayout. Funktioniert vielleicht im Moment. Ist aber falsch. Und funktioniert evtl. bald mal nicht mehr.

                          Kommentar

                          • #14
                            Zitat von tomBuilder Beitrag anzeigen

                            Und was hat das, was auch immer du da bechreibst mit dem ursprüngluichen Probelm zu tun ?
                            du wolltest ein snippet du hast ein snippet, was im netz funktioniert, eben nur bei dir nicht.

                            wie und warum sollte einer von uns zu versuchen zu debuggen was bei dir in $FORM steht ?

                            mal geraten, was du aber auch selnbst wissen dürftest was es also nicht sein kann, weil es nicht sein darf....
                            escaping
                            Sorry, dass man als "Laie" nicht von Anfang an wissen kann, welchen Rattenschwanz an Problemen es noch geben könnte.
                            Ich war der Meinung, wenn ich ein Snippet habe, dass ich es "wie normalen" HTML Code einbinden kann und die Sache gegessen ist.
                            Das der HTML-CODE bei der Einbbindung vom JS ein ' enthält und damit meinen PHP Code zertrümmert, kann ich als Laie im Voraus nicht wissen und es ist sozusagen ein Folgeproblem. Klar hätte ich jetzt sagen können: Danke für das Snippet. Es läuft und mache dann ein neues Thema auf, in dem ich schreibe: "Habe einen Fehler beim Einbinden von HTML in PHP" und würde nochmal alles von vorne erklären.

                            Mein PHP funktioniert.
                            Das Snippet funktioniert.
                            Die Einbindung des Snippets ins PHP: funktioniert leider nicht.

                            Das sind aber auch Dinge, die man erstmal herausfinden muss. Ich bin halt kein Profi und sehe direkt: "Oh das geht nicht"... Und natürlich habe ich zuerst das Snippet dahin gepackt, wo es hinsoll und da läufts halt nicht. Danach habe ich erst geschaut, ob es alleine läuft. So arbeiten Laien nunmal.

                            Kommentar

                            • #15
                              Wie gesagt. Ich hab Dir gesagt wie es problemlos geht. Aber davon willst du ja nichts wissen.

                              Kommentar

                              Vorherige 1 2 Weiter
                              Lädt...
                              X