A.Hirschlipp: Frage zu Button mit Bildeinbindung

Hallo,

ich und mein Kumpel müssen als Schulprojekt eine Webseite mit HTML & CSS entwickeln. Hier möchten wir gerne eine Webseite erstellen mit 3 Buttons in der Mitte, die dann beim Anklicken ein Bild, ein Text und eine Tabelle anzeigen. Leider wissen wir nicht wie man das mit dem Bild lösen kann und im Internet finden wir auch nichts. Gibt es hierfür eine Lösung?

Danke in Voraus.

Mit freundlichen Grüßen

Anthony Hirschlipp

  1. Hallo A.Hirschlipp,

    im Internet finden wir auch nichts

    Dann habt ihr im Unterricht gepennt oder ihr wisst nicht wie man sucht.

    Bilder werden über das <img> Element eingebunden.

    https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Servus!

      im Internet finden wir auch nichts

      Dann habt ihr im Unterricht gepennt oder ihr wisst nicht wie man sucht.

      Bilder werden über das <img> Element eingebunden.

      https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet

      Button > Klick > irgendwas passiert:

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. Lieber A.Hirschlipp,

    mit HTML & CSS [...] 3 Buttons in der Mitte, die dann beim Anklicken ein Bild, ein Text und eine Tabelle anzeigen.

    mit reinen HTML- und CSS-Mitteln ist das nicht lösbar.

    Mit CSS gäbe es eine Art Hack, wie man eine solche Interaktion faken kann, das setzt aber voraus, dass die Buttons in Wirklichkeit keine Buttons (<button>) sind, sondern Radio-Buttons (<input type="radio">). Wenn also der Checkbox-Hack genau das ist, was ihr sucht, dann bittesehr.

    Mit JavaScript gäbe es wie Matthias schon schrieb eine Möglichkeit, echte Interaktivität mit Buttons zu erreichen. Dazu braucht es aber mehr als nur HTML & CSS.

    Liebe Grüße

    Felix Riesterer

    1. Hallo Felix Riesterer,

      mit HTML & CSS [...] 3 Buttons in der Mitte, die dann beim Anklicken ein Bild, ein Text und eine Tabelle anzeigen.

      mit reinen HTML- und CSS-Mitteln ist das nicht lösbar.

      wenn es sich insgesamt um drei oder vier HTML-Dokumente handelt, dann schon.

           Bild      |      Text      |     Tabelle  
      Link Link Link | Link Link Link | Link Link Link
      

      😍😜

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Hallo Matthias,

        ich würde vorschlagen, wir warten jetzt erstmal die Rückmeldung von Anthony ab bevor wir den Thread self-typisch ausufern lassen 😉

        Anthony, wie Du an den diversen Antworten siehst, ist deine Frage nicht hinreichend präzise. Wir wissen nicht, wo genau euer Problem ist.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Lieber Rolf,

          Wir wissen nicht, wo genau euer Problem ist.

          ich schon... ;-P

          Liebe Grüße

          Felix Riesterer

    2. Hallo Felix,

      mit reinen HTML- und CSS-Mitteln ist das nicht lösbar.

      doch. Detail Element.

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. Hi there,

        mit reinen HTML- und CSS-Mitteln ist das nicht lösbar.

        doch. Detail Element.

        Sehr interessant, man lernt doch wirklich nie aus. Auch wenn der FF das laut caniuse erst seit Version 49 unterstützt bin ich gleichwohl überrascht, bis jetzt davon noch nie gehört zu haben. Jedenfalls ein fettes Plus von mir...😉

        1. @@klawischnigg

          Auch wenn der FF das laut caniuse erst seit Version 49 unterstützt

          Du hättest auch „erst seit 1949 unterstützt“ schreiben können – das ist gefühlt genauso lange her.

          😷 LLAP

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      2. Servus!

        Hallo Felix,

        mit reinen HTML- und CSS-Mitteln ist das nicht lösbar.

        doch. Detail Element.

        Wollte eigentlich letztes Jahr nen Blog-Artikel drüber schreiben; hatte schon angefangen und jetzt nicht dran gedacht! Erwischt!

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      3. Lieber Henry,

        Detail Element.

        das mag vielleicht das grundsätzliche Anliegen der OP lösen, ist aber kein originärer "Button", sondern eine Art Überschriftenzeile, die einen Aufklappmechanismus bietet. Damit einen visuellen Button so hinzubekommen, dürfte schwierig werden. Oder bist Du so ein CSS-Wizard, dass Du das details-Element so stylen kannst, dass die vom OP beschriebene Ansicht dabei herauskommt?

        Liebe Grüße

        Felix Riesterer

        1. Hallo Felix,

          ist der OP ein Schüler von Dir und Du hast ihm die Ohren langgezogen, dass er sich nicht mehr meldet? Oder hat meine erste Antwort ihn schon verschreckt?!

          Rolf

          --
          sumpsi - posui - obstruxi
          1. Lieber Rolf,

            ist der OP ein Schüler von Dir

            nein, ist er nicht. Noch nicht einmal an meiner Schule.

            und Du hast ihm die Ohren langgezogen, dass er sich nicht mehr meldet?

            Das würde ich nie tun! Wenn meine Schnarchzapfen ihren Allerwertesten dazu hoch bekämen, hier eine Frage zu stellen, wäre ich zutiefst erschüttert und schlichtweg hingerissen vor Begeisterung!

            Oder hat meine erste Antwort ihn schon verschreckt?!

            Nö. Das ist wie Bienchen und Blümelchen. Hier mal etwas naschen, da mal etwas bestäuben - und am Ende geht man polliert nach Hause.

            Liebe Grüße

            Felix Riesterer

            1. Hallo,

              Nö. Das ist wie Bienchen und Blümelchen.

              wieso habe ich jetzt zuerst "Bierchen" gelesen? 😉

              Mit besten Grüßen von Dr. Freud,
               Martin

              --
              Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
              (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)
              1. Hallo Martin,

                ich habe zuerst "poliert" gelesen, und dachte Fresse? 😬

                Rolf

                --
                sumpsi - posui - obstruxi
              2. Lieber Martin,

                wieso habe ich jetzt zuerst "Bierchen" gelesen? 😉

                jedes Bierchen ein Plaisierchen - oder so heißt es doch, oder nicht?

                Liebe Grüße

                Felix Riesterer

                1. Hallo Felix,

                  wieso habe ich jetzt zuerst "Bierchen" gelesen? 😉

                  jedes Bierchen ein Plaisierchen - oder so heißt es doch, oder nicht?

                  *rofl* 🍺
                  Ja, irgendwie so ging die Redensart.
                  An Wochenenden manchmal auch schon mittags, aber normalerweise erst am Abend.

                  Live long and pros healthy,
                   Martin

                  --
                  Wie man sich bettet, so schallt es heraus.
        2. Hi there,

          Detail Element.

          das mag vielleicht das grundsätzliche Anliegen der OP lösen, ist aber kein originärer "Button", sondern eine Art Überschriftenzeile, die einen Aufklappmechanismus bietet. Damit einen visuellen Button so hinzubekommen, dürfte schwierig werden. Oder bist Du so ein CSS-Wizard, dass Du das details-Element so stylen kannst, dass die vom OP beschriebene Ansicht dabei herauskommt?

          Naja, da muß man jetzt nicht Informatik studiert haben, damit man etwas herausbekommt, was nach einem Button aussieht; zumindest nicht, wenn man sich auf ein (Desktop-) Betriebssystem beschränkt (wovon ich beim Originalposter einmal ausgehe, ich denke nicht, daß er auf einem Telefon gerne 3 Buttons mittig nebeneinander hätte;)...

          Nachtrag