Andreas: div in tabellenzelle schreiben und nicht ausblenden

Hallo Leute,

ich habe ein Problem, welches sich wie folgt schildert:
Ich habe einen Kalendar aus einer Tabelle erstellt, was noch kein Hinderniss darstellt.

Im folgenden möchte ich nun, dass wenn der Benutzer auf einen Tag geht, sich ein kleines div öffnet, was ich per Javascript in die Zelle schreibe und welches solange geöffnet bleiben soll, solange sich jemand im div oder halt auf der Zelle befindet.

Codetechnisch habe ich das bisher wie folgt gelöst:

HTML:
Tabellenaufbau normal, aber bei einzer Zelle als Beispiel:
<td style="color : blue" onmouseover="show(this)" onmouseout="hide(this)">30</td>

Javascript:
function show(element){
 element.innerHTML = "<div class="test">Nachricht</div>"+element.innerHTML;
 element.firstChild.style.visibility = "visible";
 element.firstChild.style.display = "block";
 element.firstChild.style.top = (element.offsetTop+element.offsetHeight)+"px";
 element.firstChild.style.left = element.offsetLeft+"px";
}
function hide(element){
 element.firstChild.style.visibility = "hidden";
 element.firstChild.style.display = "none";
}

Also ich möchte das div nur temporär in diese Zelle schreiben, und beim Herausgehen wieder aus der Zelle löschen.
Der derzeitige Code erzeugt mir das div an der stelle, wo ich es haben möchte, allerdings wenn ich auf das div-gehe wird es anschließend nicht mehr abgeblendet.

Hat hier vielleicht jemand Erfahrung mit so einem Problem?

Über Antworten wäre ich dankbar

PS: Ich benötige dieses als JS-Variante, wie es mit CSS ginge kann ich für mein Problem nicht gebrauchen.

  1. Hi,

    suchst du etwas in der art ?

    <script type="text/javascript">

    function setTable(zeilen,spalten)
    {
     document.write("<table border='2' cellpadding='20' >");
     for (var i=0; i<zeilen; i++)
     {
      document.write("<tr>");
      for (var j=0; j<spalten; j++)
      {
       document.write("<td id=cell_"+zeilen+"_"+spalten+" style='color : blue' onmouseover='show(this)' onmouseout='hide(this)'>"+i+j+"</td>");
      }
      document.write("</tr>");
     }
     document.write("</table>");
    }

    function show(element)
    {
     if (!element.firstChild.style)
     {
      element.innerHTML = "<div class="test">Nachricht</div>"+element.innerHTML;
     }
      element.firstChild.style.display = "block";
      element.firstChild.style.top = (element.offsetTop+element.offsetHeight)+"px";
     element.firstChild.style.left = element.offsetLeft+"px";
    }
    function hide(element)
    {
      element.firstChild.style.display = "none";
    }

    setTable(10,10);
    </script>

    --
    Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}
    1. danke für die Antwort, du hast mir schon ein gutes Stück weitergeholfen.

      Allerdings habe ich ein neues Problem:
      Wenn ich mit Firebug (Plugin für Firefox) den Code checke, bekomme ich folgende Fehlermeldungen die ich nicht richtig interpretieren kann:
      1.) [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///usr/lib/firefox/components/nsSessionStore.js :: sss_saveState :: line 1753" data: no]
      [Break on this error] oState.session = { state: ((this._loadState == STATE_RUNNING) ? STATE_RUNNIN...
      nsSessionStore.js (line 1753)
      2.) element.firstChild.style has no properties
      hide(td)main.php (line 125)
      onmouseout(mouseout clientX=0, clientY=0)main.php (line 1)
      [Break on this error] element.firstChild.style.display = "none";

      Kennt sich jemand damit aus, bzw. kann er mir dort weiterhelfen - weiß nicht genau wo ich den Fehler suchen kann, bzw. was die Ursache sein könnte.

      Grüße
      Frank