ellen: was ist daran falsch?

SELF-Forum

was ist daran falsch?

ellen
– Informationen zu den Bewertungsregeln

Hallo!

Ich hab ein einfaches Mouseover, mit dem ich einen div sichtbar machen möchte.
Keine große Sachem ich dachte, das dauert nur 10 Minuten aber das Ding will nicht so, wie ich das will.
Konkret: Bei mouseover über einen link soll ein Bild und Text an anderer Stelle im Fenster gezeigt werden.
Bild und Text habe ich in einen Container gepackt, der erst mal als hidden definiert ist:

#hide {
position: absolute;
background-color:#ff0000;
top: 40%;
left: 45%;
width: 45%;
height: 40%;
visibility: hidden;
}

In den html-code habe ich dann folgendes geschrieben:

<a href="#" onmouseover="document.getElementById('hide')style.visibility=’visible’;" onmouseout="document.getElementById('hide')style.visibility=’hidden’;"> Bild</a>

<div id="hide"><img src="abc.jpg">bild woanders</div>

Es gibt sicher elegantere Lösungen, aber vom Prinzip her müßte das doch gehen.
Wo ist da der Fehler???
Bei mir ist der Container immer sichtbar, obwohl er ja von Haus aus hidden ist. *grübel*

Ellen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. was ist daran falsch?

    Ashura Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Ellen.

    Wo ist da der Fehler???

    Du hast zwei an der Zahl gemacht:

    <a href="#" onmouseover="document.getElementById('hide')style.visibility=’visible’;" onmouseout="document.getElementById('hide')style.visibility=’hidden’;"> Bild</a>

    Fehler Nummer 1: Du möchtest auf Eigenschaften des style–Objektes zugreifen, folglich muss dies wie folgt geschehen:

    document.getElementById('hide').style.property

    Fehler Nummer 2: An stelle von Semikola möchtest du ' verwenden.

    <div id="hide"><img src="abc.jpg">bild woanders</div>

    Weiterer kleiner Fehler: das alt–Attribut fehlt.

    BTW: es geht auch ohne JavaScript.

    Bei mir ist der Container immer sichtbar, obwohl er ja von Haus aus hidden ist. *grübel*

    Dann musst du irgendwo einen weiteren Regelsatz notiert haben, welcher den für #hide überschreibt.

    Einen schönen Sonntag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. was ist daran falsch?

      Ellen
      – Informationen zu den Bewertungsregeln

      Bei mir ist der Container immer sichtbar, obwohl er ja von Haus aus hidden ist. *grübel*

      Dann musst du irgendwo einen weiteren Regelsatz notiert haben, welcher den für #hide überschreibt.

      Nee, eben nicht. Ich hab extra eine Testseite gemacht, die wirklich nur aus dem oben stehenden Quelltext besteht.

      Deine Korrekturen probiere ich gleich mal aus, danke für die schnelle Antwort!

      Einen schönen Sonntag noch.

      Dir auch!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. was ist daran falsch?

        Wilhelm Turtschan Homepage des Autors
        – Informationen zu den Bewertungsregeln

        habe d'ehre Ellen

        Deine Korrekturen probiere ich gleich mal aus, danke für die schnelle Antwort!

        Verlagere alles in einen Scriptbereich und definiere zwei Funktionen, ist uebersichtlicher.

        <script type="text/javascript">
        function zeigen () {
          if (document.getElementById)
            document.getElementById("hide").style.visibility = "visible";
        }
        function verbergen () {
          if (document.getElementById)
            document.getElementById("hide").style.visibility = "hidden";
        }
        </script>

        im HTML-Bereich
        <a href="#" onmouseover="zeigen();" onmouseout="verbergen();"> Bild</a>

        man liest sich
        Wilhelm

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. was ist daran falsch?

          Ellen
          – Informationen zu den Bewertungsregeln

          *freu*
          Zumindest funktioniert der Wechsel schon!
          Allerdings ist der Container bei Seitenaufruf nicht hidden, aber das ist wohl eher ein CSS-Problem.
          Danke schon mal!!

          man liest sich

          Ja, gerne, obwohl ich befürchte, dass mein Wissen noch nciht ausreicht, fundierte Hilfestellung zu leisten...

          So long!

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. was ist daran falsch?

            Wilhelm Turtschan Homepage des Autors
            – Informationen zu den Bewertungsregeln

            habe d'ehre Ellen

            Zumindest funktioniert der Wechsel schon!
            Allerdings ist der Container bei Seitenaufruf nicht hidden, aber das ist wohl eher ein CSS-Problem.

            Diese Stand-Alone-Loesung tut wie es soll. Element wird nicht angezeigt.

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
            <head>
            <title>Unbenannt</title>
            <script type="text/javascript">
            function zeigen () {
              if (document.getElementById)
                document.getElementById("hide").style.visibility = "visible";
            }
            function verbergen () {
              if (document.getElementById)
                document.getElementById("hide").style.visibility = "hidden";
            }
            </script>
            <style type="text/css">
            #hide {
            position: absolute;
            background-color:#ff0000;
            top: 40%;
            left: 45%;
            width: 45%;
            height: 40%;
            visibility: hidden;
            }
            </style>
            </head>
            <body>

            <div id="hide"></div>
            <a href="#" onmouseover="zeigen();" onmouseout="verbergen();"> Bild</a>

            </body>
            </html>

            Hast Du #hide zwischen <style></style> notiert?
            Wobei ich den ID-Namen "hide" fuer etwas unguenstig halte, nur so nebenbei.

            Ja, gerne, obwohl ich befürchte, dass mein Wissen noch nciht ausreicht, fundierte Hilfestellung zu leisten...

            Kommt Zeit, kommt Wissen.

            man liest sich
            Wilhelm

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. was ist daran falsch?

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hello out there!

          habe d'ehre Ellen

          Deine Korrekturen probiere ich gleich mal aus, danke für die schnelle Antwort!

          Verlagere alles in einen Scriptbereich und definiere zwei Funktionen, ist uebersichtlicher.

          Ja. Und vollständige Trennung von HTML und JavaScript ist noch übersichtlicher:

          <script type="text/javascript">  
[code lang=javascript]  window.onload = function() {  
    var hide = document.getElementById("hide");  
    document.getElementById("foo").onmouseover = function() {  
      hide.style.visibility = "visible";  
    };  
    document.getElementById("foo").onmouseout = function() {  
      hide.style.visibility = "hidden";  
    };  
  };

          </script>[/code]

          im HTML-Bereich
          <a id="foo" href="#"> Bild</a>
                            ^
          Dort möchte noch etwas Sinnvolles stehen, kein Verweis auf den Seitenanfang.

          See ya up the road,
          Gunnar

          PS: document.getElementById("hide") ist in einer Variablen 'hide' zu speichern, damit nicht bei jedem Mouseover-/Mouseout-Event erneut der Elementbaum durchsucht werden muss.

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln