Horst: DIV durch mouseover erscheinen lassen

Hallo ich habe da ein kleines Problem,

Ich versteh selbst 'nur' HTML und überarbeite im Moment meine HP von Grund auf.

Zentriert ist zur Zeit ein Bild. Beim Mouseover möchte ich das Menü einblenden lassen, das wiederum beim mouseout verschwinden soll.

Das ist, was ich bis jetzt habe:

  
<HTML>  
<HEAD>  
<Meta HTTP-EQUIV="content-type" content="text/html; charset=iso-8859-1">  
<Title>  
noise prevention - home  
</Title>  
</HEAD>  
<BODY bgcolor="black" text="lime" link="lime" alink="silver" vlink="lime">  
<table width="100%" height="100%">  
<tr>  
<td width="100%" height="100%" align="center">  
<img src="images/index.gif" height="409" width="500">  
</td>  
</tr>  
</table>  
</HTML>  

und hier das bild:

http://www.loaditup.de/287321.html

Ich weiß, dass so etwas mit JavaScript funktionieren müsste, kenn mich hiermit aber überhaupt nicht aus.

Ich hoffe ihr könnt mir helfen.

  1. Hallo,

    Ich weiß, dass so etwas mit JavaScript funktionieren müsste, kenn mich hiermit aber überhaupt nicht aus.

    klar funktioniert so etwas :)

    <div id="menu"></div>
    <img src="..." [...] onmouseover="blubb('menu', 'block')" onmouseout="blubb('menu', 'none')">

    [...]

    function blubb(elem, z) {
      document.getElementById(elem).style.display = z;
    }

    MfG. Christoph Ludwig

    --
    Wo die Sprache aufhört, fängt die Musik an...
    Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
    Go to this
    1. function blubb(elem, z) {
        document.getElementById(elem).style.display = z;
      }

      So hier hab ich schon ein Problem. Wo steck ich diese function hin und wie baue ich sie in HTML ein?

      1. So hier hab ich schon ein Problem. Wo steck ich diese function hin und wie baue ich sie in HTML ein?

        vergiss das ganze am besten wieder, das würde zwar prinzipiell funktionieren, ist aber funktioneller blödsinn

        1. vergiss das ganze am besten wieder, das würde zwar prinzipiell funktionieren, ist aber funktioneller blödsinn

          Ich würds trotzdem versuchen. Schadet ja nicht.

          1. Ach ich komm hier mit den Baum_diagrammen nicht zurecht also hier meine Frage nochmal:

            "Super, es klappt.
            Nur: Beim Aufrufen der Seite wird das <DIV> schon angezeigt. Was kann ich hinzufügen damit es erst beim Mouseover erscheint??"

            1. Hallo,

              Super, es klappt.

              ▼ anscheinend noch nicht ▼ :)

              Nur: Beim Aufrufen der Seite wird das <DIV> schon angezeigt. Was kann ich hinzufügen damit es erst beim Mouseover erscheint??"

              indem du im div tag ein style definierst:

              <div id="menu" style="display:none;">

              MfG. Christoph Ludwig

              --
              Wo die Sprache aufhört, fängt die Musik an...
              Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
              Go to this
              1. Soweit so gut. Außerdem habe ich das Problem das ich das DIV nicht anwählen kann - sprich das erscheinene Menü nicht anwählen zu können.

                Ich hab schon überlegt das Bild einfach größer zu machen oder das DIV wiederum mit einem mouseover-befehl zu versehen.

                Habt ihr /du vielleicht eine bessere Idee?

                1. Hallo,

                  Habt ihr /du vielleicht eine bessere Idee?

                  vertausche einfach <div ...></div> und <img ...> in deinem quelltext ...

                  MfG. Christoph Ludwig

                  --
                  Wo die Sprache aufhört, fängt die Musik an...
                  Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                  Go to this
                  1. Danke ich probiers.

        2. Hallo,

          vergiss das ganze am besten wieder, das würde zwar prinzipiell funktionieren, ist aber funktioneller blödsinn

          man kanns auch mit CSS machen. nur er wollte doch JS oder sehe ich das falsch?
          oder versteh ich dich jetzt falsch?

          MfG. Christoph Ludwig

          --
          Wo die Sprache aufhört, fängt die Musik an...
          Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
          Go to this
          1. man kanns auch mit CSS machen. nur er wollte doch JS oder sehe ich das falsch?
            oder versteh ich dich jetzt falsch?

            ja, ich meinte damit, dass du hier eine katastrophe vorschlägst

            ein klappmenü mit javascript sollte selbständig erkennen, welches element es aufklappen muss

            es gibt eine einzige funktion (im schlimmsten fall 2) die sich entsprechend verhält und nur "this" als referenz übergeben bekommt

            als voraussetzung ist natürlich auch ordentliches html von nöten

      2. Hallo,

        So hier hab ich schon ein Problem. Wo steck ich diese function hin und wie baue ich sie in HTML ein?

        kennst du das sogenannte HTML-Grundgerüst?

        <html>  
        <head>  
          <title></title>  
          <script type="text/javascript">  
          /*** Diese Funktion vermittelt dem übergebenen Element den übergebenen display-wert ***/  
          function blubb(elem, z) {  
            document.getElementById(elem).style.display = z;  
          }  
          </script>  
          
          <!-- Hier könnte noch "style" hin-->  
        </head>  
        <body>  
          <div id="menu"></div>  
          <img [...] onmouseover="blubb('menu', 'block')" onmouseout="blubb('menu', 'none')">  
        </body>  
        </html>
        

        klar soweit?

        MfG. Christoph Ludwig

        --
        Wo die Sprache aufhört, fängt die Musik an...
        Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
        Go to this
        1. Danke ich probier's aus.

        2. kennst du das sogenannte HTML-Grundgerüst?

          kennst duhttp://de.selfhtml.org/html/allgemein/grundgeruest.htm@title='s?

          1. Hallo,

            kennst du das sogenannte HTML-Grundgerüst?
            kennst duhttp://de.selfhtml.org/html/allgemein/grundgeruest.htm@title='s?

            na klar!

            das mindeste:

            <html>  
            <head>  
              <title></title>  
            <head>  
            <body>  
            </body>  
            </html>
            

            und dann können nich weitere elemente verwendet werden...

            MfG. Christoph Ludwig

            --
            Wo die Sprache aufhört, fängt die Musik an...
            Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
            Go to this
            1. Yerf!

              das mindeste:

              <html>

              <head>
                <title></title>
              <head>
              <body>
              </body>
              </html>

                
              Davon brauchst du eigentlich nur den Title, der Rest ist optional[1]. Dafür fehlt aber etwas: der DOCTYPE!  
                
                
              Gruß,  
                
              Harlequin  
                
                
              [1]: don't try this at home! Manche Browser liefern da komische Ergebnisse, wenn man wirklich so minimalistisch arbeitet...  
                
              
              -- 
              <!--[if IE]>This page is best viewed with a webbrowser. [Get one today!](http://www.opera.com)<![endif]-->
              
              1. Hallo,

                ...

                Davon brauchst du eigentlich nur den Title...
                der Rest ist optional[1].

                empfehle ich nicht ;)

                Dafür fehlt aber etwas: der DOCTYPE!
                naja ok ... den kopiere ich immer irgendwo raus ^^ ... den kann ich ni auswendig :)

                MfG. Christoph Ludwig

                --
                Wo die Sprache aufhört, fängt die Musik an...
                Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                Go to this
                1. Dafür fehlt aber etwas: der DOCTYPE!
                  naja ok ... den kopiere ich immer irgendwo raus ^^ ... den kann ich ni auswendig :)

                  dafür gibts die<http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title= selfhtml-seite mit dem grundgerüst> oder die entsprechenden seiten des w3c

                  "irgendwo" rauskopieren kann uncool enden ;)

                  1. Hallo,

                    "irgendwo" rauskopieren kann uncool enden ;)

                    ja bevor ich den dokumenttyp rauskopiere les ich mir das doch durch ^^

                    MfG. Christoph Ludwig

                    --
                    Wo die Sprache aufhört, fängt die Musik an...
                    Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                    Go to this
                    1. ja bevor ich den dokumenttyp rauskopiere les ich mir das doch durch ^^

                      wenn du dir die syntax nicht merken kannst, wie weisst du dann nach dem durchlesen obs richtig war?

                      1. Hallo,

                        wenn du dir die syntax nicht merken kannst, wie weisst du dann nach dem durchlesen obs richtig war?

                        ich glaube nicht, das selfHTML fehler in den dokuemnttypdeklarationen hat oder!?
                        von anderen seiten kopier ich die ni.

                        MfG. Christoph Ludwig

                        --
                        Wo die Sprache aufhört, fängt die Musik an...
                        Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                        Go to this
                        1. ich glaube nicht, das selfHTML fehler in den dokuemnttypdeklarationen hat oder!?

                          glauben heisst nix wissen, auch die leute von selfhtml sind nicht perfekt[1] - es kann durchaus mal was schief läuft - wenn du aus der dokumentation rauskopierst, kannst du fast 100%ig sicher davon ausgehen, dass es passt - aus dem quelltext würde ich aber niemals kopieren

                          warum sollte man auch eine dtd von einer seite kopieren, nur weil man glaubt sie habe recht?

                          hier im forum ist folgendes zu lesen
                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                          wer sagt mir, dass die dtd hier exakt die richtige für meine bedürfnisse ist?

                          [1] die dtd stimmt jedenfalls zumindest auf dieser seite nicht 100% mit dem inhalt bzw dem dokument überein -> Error found while checking this document as XHTML 1.0 Strict!

                          1. Hallo,

                            wenn du aus der dokumentation rauskopierst, kannst du fast 100%ig sicher davon ausgehen, dass es passt

                            bin ich auch ... sonst würde ichs nicht machen ;)

                            wer sagt mir, dass die dtd hier exakt die richtige für meine bedürfnisse ist?

                            durch mein wissen und der seite, die ich mache, weis ich, welche die richtige ist.

                            MfG. Christoph Ludwig

                            --
                            Wo die Sprache aufhört, fängt die Musik an...
                            Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                            Go to this
                2. Yerf!

                  Davon brauchst du eigentlich nur den Title...
                  der Rest ist optional[1].
                  empfehle ich nicht ;)

                  Ich ja auch nicht... ;-)

                  Es gab z.B. FireFox-Versionen die bei sowas:

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                          "http://www.w3.org/TR/html4/loose.dtd">  
                  <title>TEST</title>  
                  <div id="x">x</div>  
                  <script type="text/javascript">alert(document.getElementById("x"));</script>  
                  
                  

                  Kein Objekt sondern null geliefert haben, weil das Script beim Parsen in den Head gepackt wurde und sich somit vor dem Div befand...

                  (mit der 2.0.0.17 ist's nicht mehr nachvollziehbar)

                  Gruß,

                  Harlequin

                  --
                  <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
  2. Hi,

    Ich versteh selbst 'nur' HTML

    gut, dass Du das dazu sagst. Der von Dir gelieferte Code allein hätte zu dieser Erkenntnis nicht ausgereicht.

    und überarbeite im Moment meine HP von Grund auf.

    Dann fang da bitte erst mal beim HTML an. Fahre mit dem CSS fort. Anschließend ergänze durch JavaScript. Im Idealfall gibt es keinerlei Übergangsphasen - die Reihenfolge "HTML, CSS, JavaScript" wird strikt und überschneidungsfrei eingehalten.

    Zentriert ist zur Zeit ein Bild. Beim Mouseover möchte ich das Menü einblenden lassen, das wiederum beim mouseout verschwinden soll.

    Beim Mouseover über was? Welches Menü? Dein Code lässt hierzu nichts erkennen.

    und hier das bild:
    http://www.loaditup.de/287321.html

    Und wo ist der Inhalt?

    Ich weiß, dass so etwas mit JavaScript funktionieren müsste,

    Und ohne auch. Gelle? Was erhält ein Nutzer[1] ohne JavaScript?

    kenn mich hiermit aber überhaupt nicht aus.

    Was hast Du getan, um dieses Problem zu beheben?

    Cheatah

    [1] Einer wie Google beispielsweise.

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. kenn mich hiermit aber überhaupt nicht aus.
      Was hast Du getan, um dieses Problem zu beheben?

      unwissenheit ist kein problem, welches behoben werden muss
      unwissenheit ist ein defizit, welches es auszugleichen gilt

  3. Super, es klappt.
    Nur: Beim Aufrufen der Seite wird das <DIV> schon angezeigt. Was kann ich hinzufügen damit es erst beim Mouseover erscheint??