DIV mit Javascript an Tabellenzelle ausrichten

[Frank1985]

Hallo,

ich hab ein Problem ich möchte ein div an einer Tabellenzelle ausrichten.
Konkret heißt das, ich kenne ja nicht die Position der Tabellenzelle und die Position muss ich ja dann dem div-mitteilen. Ich möchte bei jedem Übergang mit der Maus auf die Zelle, dass das DIV darunter angezeigt wird. Man soll dann auch in das div-reingehen können und wenn man eine Zelle weitergeht oder das div-verlässt soll es wieder ausgeblendet werden.

Versuch zu zeichnen:
-------------
|..|..|..|..|
-------------
|..|..|..|..|
-------------
___|DIV Anzeigen|
___|Text im div |

Also ich befinde mich damit gerade in der zweiten Zeile und der zweiten Spalte und möchte das genau an der unteren linken Ecke ausgerichtet haben und das soll so für alle Tabellenzellen funktionieren. Das div-hat immer den selben Namen.

Für Vorschläge wäre ich dankbar.

Grüße
Frank

[Alexander (HH)]

Moin Moin!

Ich würde mal mit CSS anfangen statt mit Javascript, interessant dürfte :hover sein. Es gibt einige Implementationen von hierarchischen Menüs alleine mit CSS, das dürfte der für diesen Fall geeignete Mechanismus sein.

5 Sekunden Google liefern z.B. http://meyerweb.com/eric/css/edge/menus/demo.html

Alexander

[Frank1985]

Moin Moin!

Ich würde mal mit CSS anfangen statt mit Javascript, interessant dürfte :hover sein. Es gibt einige Implementationen von hierarchischen Menüs alleine mit CSS, das dürfte der für diesen Fall geeignete Mechanismus sein.

5 Sekunden Google liefern z.B. http://meyerweb.com/eric/css/edge/menus/demo.html

Alexander

Ja, mit css gibt es sicherlich einige Lösungen.
Das Problem ist aber, dass ich den Inhalt für jede Tabellenzelle per Ajax nachladen will.
Daher kommt eine reine CSS-Lösung nicht in Frage

[Frank1985]

Hallo,

ich hab ein Problem ich möchte ein div an einer Tabellenzelle ausrichten.
Konkret heißt das, ich kenne ja nicht die Position der Tabellenzelle und die Position muss ich ja dann dem div-mitteilen. Ich möchte bei jedem Übergang mit der Maus auf die Zelle, dass das DIV darunter angezeigt wird. Man soll dann auch in das div-reingehen können und wenn man eine Zelle weitergeht oder das div-verlässt soll es wieder ausgeblendet werden.

Versuch zu zeichnen:

|..|..|..|..|

|..|..|..|..|

___|DIV Anzeigen|
___|Text im div |

Also ich befinde mich damit gerade in der zweiten Zeile und der zweiten Spalte und möchte das genau an der unteren linken Ecke ausgerichtet haben und das soll so für alle Tabellenzellen funktionieren. Das div-hat immer den selben Namen.

Für Vorschläge wäre ich dankbar.

Grüße
Frank

Also ich hab das jetzt soweit, dass das div mit dem Text an der Position angezeigt wird, wo ich es gerne hätte.

Allerdings möchte ich gerne, dass wenn man auf das div geht, es nicht direkt ausgeblendet wird.
Im Moment hab ich eine funktion die wenn man aus der zelle geht, dass div halt versteckt.

das ist mein js-Code:
----------------------
function show(element){
document.getElementById("test").style.visibility = "visible";
document.getElementById("test").style.display = "block";
//alert(element.offsetWidth);
document.getElementById("test").style.top = (element.offsetTop+element.offsetHeight)+"px";
document.getElementById("test").style.left = element.offsetLeft+"px";
}
function hide(){
document.getElementById("test").style.visibility = "hidden";
document.getElementById("test").style.display = "none";
}

das div sieht so aus
---------------------
<div id="test"  style="position:absolute; display:none; border:1px solid #C0C0C0;">Nachricht</div>

hat da jemand noch einen Vorschlag?