Gast 22: Text&Bilder per Click ein- und ausblenden

SELF-Forum

Text&Bilder per Click ein- und ausblenden

Gast 22
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte gerne Infos (Text&Bilder) per Click öffnen und schließen, ohne dass ein Popupfenster o.ä. aufgeht (siehe Beispiel: http://www.westhoff.de/service/maschinenboerse/Kaffeemaschinen.html#anchor-4497.

Wie mache ich das? Wäre für Hilfe sehr dankbar.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text&Bilder per Click ein- und ausblenden

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    ich möchte gerne Infos (Text&Bilder) per Click öffnen und schließen, ohne dass ein Popupfenster o.ä. aufgeht (siehe Beispiel: http://www.westhoff.de/service/maschinenboerse/Kaffeemaschinen.html#anchor-4497.
    Wie mache ich das? Wäre für Hilfe sehr dankbar.

    The Proud People of China waren lange berüchtigt für ihr backengineering.
    Bevor ich mich da aber ran machen würde, würde ich mir ein Vorbild suchen, das in allen Lebenslagen funktioniert. Deine verlinkte Seite versagt da leider (schalte JS aus).

    JS soll also die im Default zuerst

    • die Logik an das DOM binden, bzw das bestehende DOM umschreiben und "Details einblenden" Buttons erzeugen.
    • sichtbaren Elemente zuerst zusammenklappen.
      Wird eingeblendet, muss der der Button natürlich zu "ausblenden" geändert werden.
      Wird ausgeblendet, muss der Button wieder zu "Details einblenden" geändert werden.

    Das sind also insgesamt eine init() Funktion und zwei Funktionen für das einblenden und ausblenden.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Text&Bilder per Click ein- und ausblenden

    docBernie
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich möchte gerne Infos (Text&Bilder) per Click öffnen und schließen, ohne dass ein Popupfenster o.ä. aufgeht (siehe Beispiel: http://www.westhoff.de/service/maschinenboerse/Kaffeemaschinen.html#anchor-4497.

    Wie mache ich das? Wäre für Hilfe sehr dankbar.

    Hallo!

    Wie Beat schon sagt: Die Lösung ist nicht optimal, weil das Abschalten von Javascript den Effekt zerstört. Ob das im Sinne des Seitenbetreibers ist ...? Aber gut; neben den Hinweisen zu init und (guten) OnOff-Funktionen hier folgender Tip:

    Als erstes versucht man der Seite ihr "Geheimnis" zu entlocken, in dem man sich den Seiten-Quelltext anschaut. Das ist dann nicht weiterführend, wenn dieser dynamisch erzeugt wird. In diesem Fall erhalten wir aber nachdem -> Cursor auf die Seite -> rechte Maustaste -> Quelltext anzeigen -> einen guten Blick auf das HowTo:

    Vor dem <head></head> steht das tag <script>...</script>. In diesem befinden sich eine ganze Reihe von Funktionen. Unter anderem als erstes die Funktion "aufzu". Da also steht, was getan werden soll und wie.

    Innerhalb des Quelltextes sind Abschnitte der Seite mit einer eindeutigen id gekennzeichnet, so dass über das document Objekt der Abschnitt eindeutig gefunden werden kann.

    Innerhalb des <body>...</body> finden wir dann z.B.:

    <div id="a-4311"><a href="#anchor-4311" onclick='aufzu("4311","seton");'>Informationen einblenden</a></div>

    Das entscheidende Teil ist dann, über einen EventHandler ( in diesem Fall onclick ) die Funktion "aufzu" aufzurufen, an die die beiden Parameter ("4311","seton") übergeben werden.

    Was ist zu tun, um solche Lösungen selbst zu erstellen? Man muss ein klitzekleines bisschen sich mit javascript aus einander setzen. Beim Ausprobieren nicht die Nerven verlieren, weil am Anfang Schreibfehler das größte Problem darstellen.

    Also: javascript -> dom -> document
          javascript -> EventHandler
          CSS -> Boxmodel + div

    Sofern Du bei Null anfängst, wird das schon ein, zwei Stündchen dauern ... ;-)

    Gruß, Bernhard

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text&Bilder per Click ein- und ausblenden

      Gast22
      – Informationen zu den Bewertungsregeln

      Hallo Bernhard,
      Danke für deine detaillierte Hilfe. Auch dir Beat, Danke!
      Habt ihr ein Vorschlag für eine optimalere Lösung? Ich hatte bereits an einen XML editierbaren FlashFilm gedacht,der einen Zusatznutzen für den Seitenbetreiber hätte. Dann könnte er seine Angebote selber aktuallisieren. Oder habt ihr etwas Besseres auf Lager?

      Gruß
      Gast22

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text&Bilder per Click ein- und ausblenden

        apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Gast22!

        Habt ihr ein Vorschlag für eine optimalere Lösung?

        optimaler als optimal kann eine Lösung nicht sein.

        Es gäbe die Möglichkeit, auf JS zu verzichten, indem man die Seiten doppelt vorhält, einmal mit und einmal ohne die weiterführenden Informationen. Man könnte auf die doppelte Wartungsarbeit verzichten, wenn man die Bausteine z.B. mit include zusammenführt.

        Nachteil wäre das Neuladen der Seite beim Klick auf Infos einblenden. Vorteil wäre, dass jeder die Seite/n betrachten kann.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Text&Bilder per Click ein- und ausblenden

          Gast22
          – Informationen zu den Bewertungsregeln

          Hallo Matthias,

          auch ich wünsche dir Frieden und Glück!
          Dein Vorschlag scheint mir nicht optimaler `;-)) zu sein. Aber, Danke!

          Gast22

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln