interhorn: mousover Text ein- und ausblenden

Ich finde für folgendes Problem beim besten Willen keine Lösung, auch wenn ich schon stundenlang gegoogelt habe:

Von einem Text sollen nur die Überschriften zu sehen sein. Kommt man mit dem Corsor über eine diese Überschriften erscheint der dazugehörige Text, der wieder verschwindet, sobald man mit der Mouse die Überschritft verlässt:

ÜBERSCHRIFT1
ÜBERSCHRIFT2
ÜBERSCHRIFT3
ÜBERSCHRIFT4

kommt man mit dem Cursor auf Überschrift1, soll Text1 erscheinen:

ÜBERSCHRIFT1
text1text1text1text1text1
text1text1text1text1text1
text1text1text1text1text1
text1text1text1text1text1
ÜBERSCHRIFT2
ÜBERSCHRIFT3
ÜBERSCHRIFT4

kommt man mit dem Cursor auf Überschrift2, soll Text1 wieder ausgeblendet werden und Text2 erscheinen:
ÜBERSCHRIFT1
ÜBERSCHRIFT2
text2text2text2text2text2
text2text2text2text2text2
text2text2text2text2text2
ÜBERSCHRIFT3
ÜBERSCHRIFT4

usw.

Wer kann mir helfen?

  1. Hi,
    Du brauchst onmouseover/onmouseout und die CSS-Eigenschaft visibility:hidden/visible.

    freundliche Grüße
    Ingo

    1. Du brauchst onmouseover/onmouseout und die CSS-Eigenschaft visibility:hidden/visible.

      Die CSS-Eigenschaft lautet wohl eher:
      dislay:none|block|inline;

      Gruß
      Avalon

      1. Hi,

        Die CSS-Eigenschaft lautet wohl eher:
        dislay:none|block|inline;

        stimmt. Es sollte ja kein Platz reserviert werden und der Text in den Elementenfluß eingeschoben werden.

        freundliche Grüße
        Ingo

        1. Hi,

          Die CSS-Eigenschaft lautet wohl eher:
          dislay:none|block|inline;
          stimmt. Es sollte ja kein Platz reserviert werden und der Text in den Elementenfluß eingeschoben werden.

          freundliche Grüße
          Ingo

          Tut mir leid, Leute, danke für eure Mühe, aber irgendwie habe ich das Gefühl, ich verstehe nur Bahnhof. Offensichtlich muss ich zunächst einen kompletten Web-Programmierungs-Kurs absolvieren, um das zu verstehen. Dazu habe ich aber keine Zeit - sorry, ich hab halt nebenbei auch noch Familie. Es wäre nett, wenn jemand einen brauchbaren Quelltextschnipsel hat und den mir zur Verfügen stellen könnte und ich damit solange rumprobieren könnte, bis es funktioniert. Wenn nicht, dann gibt es meine Homepage halt ohne diese nette Spielerei.

          1. Hi,

            Es wäre nett, wenn jemand einen brauchbaren Quelltextschnipsel hat und den mir zur Verfügen stellen könnte und ich damit solange rumprobieren könnte, bis es funktioniert.

            Nun, Du könntest einen Blick in den Quelltext meiner SiteMap werfen, aber ich fürchte, daß Du damit doch etwas überfordert sein wirst.

            freundliche Grüße
            Ingo

            1. Nun, Du könntest einen Blick in den Quelltext meiner SiteMap werfen, aber ich fürchte, daß Du damit doch etwas überfordert sein wirst.

              freundliche Grüße
              Ingo

              Vielen Dank! Ich habe mich durch Deinen Quelltext durchgewurstelt und was Brauchbares für mich daraus gemacht. Ich habe nur noch das Problem, dass mir zunächst der ganze Text angezeigt wird, erst beim ersten mouseover verschwinden die übrigen Unterpunkte. Wie kann ich das abändern.
              Hier mein Quelltext:

              <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
              <html>
              <head>
              <script type="text/javascript">
                var aktiv = true;
                function raus(aus)
                {
                  if(document.getElementById(aus)) document.getElementById(aus).style.display="none";
                }

              function rein(ein)
                {
                  if(document.getElementById(ein)) document.getElementById(ein).style.display="block";
                }

              function zeig(ein)
                {
                  if (aktiv)
                  {
                    for (var i=1; i<=8; i++)
                    {
                      if (ein.indexOf("e"+i)) raus("e"+i);
                    }
                    if (ein) rein(ein); else rein("auf");
                  }
                }

              function aufklappen()
                {
                  for (var i=1; i<=8; i++)
                  {
                    rein("e"+i);
                  }
                  aktiv = false; raus("auf");
                }
              </script>
              </head>

              <body link="#003366" alink="#003366" vlink="#003366" onload=zeig('')">
              <font face="arial" size="5"><b>
              Titel<br><br></b>
              <font face="arial" size="3">
              Sie erhalten automatisch weitere Informationen angezeigt, wenn Sie mit dem Mauszeiger<br>
              auf die einzelnen Überschriften gehen.&nbsp;&nbsp;&nbsp;
              <id="auf"><a href="javascript:aufklappen()"><font face="times" size="3">Den ganzen Text st&auml;ndig anzeigen</a><br><br>

              <li><a onmouseover="zeig('e1')"><font face="arial" size="3"><b>ÜBERSCHRIFT1</b></a><ul id="e1">
              <li>text1.1</li>
              <li>text1.2</li>
              <li>text1.3</li>
              <li>text1.4</li>
              </ul><br><br>
              <li><a onmouseover="zeig('e2')"><font face="arial" size="3"><b>ÜBERSCHRIFT2</b></a><ul id="e2">
              <li>text2.1</li>
              <li>text2.2</li>
              <li>text2.3</li>
              <li>text2.4</li>
              </ul></li><br><br>
              <li><a onmouseover="zeig('e3')"><font face="arial" size="3"><b>ÜBERSCHRIFT3</b></a><ul id="e3">
              <li>text3.1</li>
              <li>text3.2</li>
              <li>text3.3</li>
              <li>text3.4</li>
              </ul></li><br><br>
              <li><a onmouseover="zeig('e4')"><font face="arial" size="3"><b>ÜBERSCHRIFT4</b></a><ul id="e4">
              <li>text4.1</li>
              <li>text4.2</li>
              <li>text4.3</li>
              </ul></li><br><br>
              <li><a onmouseover="zeig('e5')"><font face="arial" size="3"><b>ÜBERSCHRIFT5</b></a><ul id="e5">
              <li>text5.1</li>
              <li>text5.2</li>
              <li>text5.3</li>
              <li>text5.4</li>
              </ul><br><br>
              <li><a onmouseover="zeig('e6')"><font face="arial" size="3"><b>ÜBERSCHRIFT6</b></a><ul id="e6">
              <li>text6.1</li>
              <li>text6.2</li>
              <li>text6.3</li>
              <li>text6.4</li>
              </ul><br><br>
              <li><a onmouseover="zeig('e7')"><font face="arial" size="3"><b>ÜBERSCHRIFT7</b></a><ul id="e7">
              <li>text7.1</li>
              <li>text7.2</li>
              <li>text7.3</li>
              <li>text7.4</li>
              </ul><br><br>
              <li><a onmouseover="zeig('e8')"><font face="arial" size="3"><b>ÜBERSCHRIFT8</b></a><ul id="e8"
              <li>text8.1</li>
              <li>text8.2</li>
              <li>text8.3</li>
              <li>text8.4</li>
              </ul></li>
              </body>
              </html>

              1. Hi,

                Ich habe mich durch Deinen Quelltext durchgewurstelt und was Brauchbares für mich daraus gemacht.

                Oha, hätte ich nict gedacht. ;-)

                Ich habe nur noch das Problem, dass mir zunächst der ganze Text angezeigt wird, erst beim ersten mouseover verschwinden die übrigen Unterpunkte. Wie kann ich das abändern.
                Hier mein Quelltext:

                Bitte korrigiere die wirklich schlimmen HTML-Fehler mit Hilfe des Validators. Falls es dann immer noch nicht klappt, wäre es praktisch, wenn Du eine Beispielseite online stellst.
                Nur mal die gröbsten Schnitzer:

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

                falsch.

                <font face="arial" size="5"><b>

                eliminiere alle font-Tags - die zudem falsch verschachtelt sind.

                <id="auf">

                Es gibt kein solches Element.

                <li>

                wo ist das <ul>?

                freundliche Grüße
                Ingo

                1. Heureka - ich habe den entscheidenden Fehler gefunden:
                  bei

                  <body link="#003366" alink="#003366" vlink="#003366" onload=zeig('e1')">

                  fehlt ein ", richtig wäre:

                  <body link="#003366" alink="#003366" vlink="#003366" onload=zeig"('e1')">

                  Jetzt ist auch alles gleich zu Anfang geschlossen, was geschlossen sein soll. Ich danke ganz herzlich für Deine Hilfe! Die anderen Fehler haben scheinbar keinen direkten Einfluss auf die Funktion, ich werde aber versuchen, sie zu korrigieren.

                  Ich habe zwar nicht wirklich verstanden, was ich da als Quelltext vor mir habe, aber es funktioniert und sieht so aus, wie ich es haben wollte.

                  1. Nachtrag
                    Ich meine natürlich
                    statt »» <body link="#003366" alink="#003366" vlink="#003366" onload=zeig('')">
                    muss es

                    <body link="#003366" alink="#003366" vlink="#003366" onload=zeig"('')">

                    heißen

                    1. Hi,

                      Ich meine natürlich
                      statt »» <body link="#003366" alink="#003366" vlink="#003366" onload=zeig('')">
                      muss es

                      <body link="#003366" alink="#003366" vlink="#003366" onload=zeig"('')">
                      heißen

                      nein. <body link="#003366" alink="#003366" vlink="#003366" onload="zeig('')">

                      freundliche Grüße
                      Ingo

          2. Hi,

            Es wäre nett, wenn jemand einen brauchbaren Quelltextschnipsel hat und den mir zur Verfügen stellen könnte und ich damit solange rumprobieren könnte, bis es funktioniert.

            Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe einbinden.

            Im HEAD dann wie gezeigt:

            <script type="text/javascript" language="JavaScript"><!--
            function toggle(){return false;}
            //--></script>

            Und im BODY:

            <h1 onMouseOver="toggle('unfold','p:id','Abschnitt01');" onMouseOut="toggle('fold','p:id','Abschnitt01');">Absatz 1</h1>
            <p id="Absatz01">Bla</p>

            sowie am Ende der Seite ein

            <script type="text/javascript" language="JavaScript"><!--
            toggle('fold','p:id','Abschnitt')
            //--></script>

            Am besten, Du packst alles in eine Tabelle und das Script zum Einklappen in die letzte Tabellenzelle am Ende. Dann wird der Text generiert, und bevor die fertige Tabelle ausgegeben wird, werden (sofern überhaupt möglich) die Texte noch ein geklappt.

            Gruß, Cybaer

            --
            Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
            1. Nachtrag:

              Muß natürlich jeweils "Absatz" statt "Abschnitt" heißen. =;-)

              Und ein

              <h1 onMouseOver="toggle('unfold','Absatz01');" onMouseOut="toggle('fold','Absatz01');">Absatz 1</h1>

              reicht auch schon.

              Und: Man kann auch immer nur ein Absatz sichtbar machen, *bis* man auf die nächste Überschrift kommt (also nicht einklappen, wenn man die Überschrift verläßt). Dann sähe es so aus:

              <h1 onMouseOver="toggle('fold','p:id','Absatz','01'true);">Absatz 1</h1>

              Dann werden alle IDs der Ps die mit "Absatz" beginnen eingeklappt. Für "01" (also die ID "Absatz01") gilt das Gegenteil ("true"): Er wird ausgeklappt. Ist weniger "hektisch". ;-)

              Gruß, Cybaer

              --
              Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
              1. Nachtrag 2 (grummel):

                <h1 onMouseOver="toggle('fold','p:id','Absatz','01'true);">Absatz 1</h1>

                Kommafehler =:-o:

                <h1 onMouseOver="toggle('fold','p:id','Absatz','01',true);">Absatz 1</h1>

                Gruß, Cybaer

                --
                Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
  2. Hallo interhorn.

    Kommt man mit dem Corsor über eine diese Überschriften erscheint der dazugehörige Text, der wieder verschwindet, sobald man mit der Mouse die Überschritft verlässt:

    Kleine Frage: Ist der Text nur zum Anschauen, oder wird damit interagiert? ( Sprich: Links, Formularelemente, ... werden enthalten sein.)

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    Try it: Become an Opera Lover in 30 days
  3. hi,

    kommt man mit dem Cursor auf Überschrift1, soll Text1 erscheinen:

    ÜBERSCHRIFT1
    text1text1text1text1text1
    text1text1text1text1text1
    text1text1text1text1text1
    text1text1text1text1text1
    ÜBERSCHRIFT2
    ÜBERSCHRIFT3
    ÜBERSCHRIFT4

    das sich so etwas äußerst besch... eiden bedient, ist dir hoffentlich klar?

    wenn ich einen text lese, bewege ich idR. erst mal den mauszeiger etwas weg, damit der aus meinem aufmerksamkeitsfokus ist, und ich in ruhe lesen kann.
    huch, jetzt wird der text schon wieder zugeklappt, und vielleicht auch schon der nächste auf - was soll das denn ...?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
      • was soll das denn ...?

      Ist das eine reflexive Frage?

      Gruß
      Avalon