nicht angemeldet
Hallo,
ich würde mich freuen, wenn jemand mir bei folgendem (vielleicht trivialen) Problem helfen kann:
Ich habe eine Tabelle, in der sich in jeder Zelle genau eine Grafik befindet: entweder ein grünes, ein gelbes oder ein rotes Lämpchen. Beim Hineinbewegen des Mauszeigers in eine Tabellenzelle soll der Zelleninhalt dynamisch geändert werden: Es sollen dann drei Grafiken (grünes UND gelbes UND rotes Lämpchen, je als Link) angezeigt werden. Beim Verlassen der Zelle soll wieder das zuvor darin befindliche Lämpchen angezeigt werden.
Meine naive Herangehensweise: Ich versehe das <td>-Tag mit onMouseover und onMouseout und verändere jeweils den Zelleninhalt, wobei ich mir den alten Inhalt in einer Variablen merke. Das habe ich auf mehrere Varianten ausprobiert (Ändern von innerHTML, Verwenden von replaceChild ...)
Problem: Das Ändern des Zelleninhalts funktioniert zwar zunächst, aber sobald ich den Mauszeiger innerhalb der Zelle auf eine Grafik (oder einen Link oder irgendein anderes Kindelement) bewege, findet das Mouseout-Event statt, und der alte Zelleninhalt wird wiederhergestellt. Ich müsste also irgendwie der Tabellenzelle klar machen, dass sie KEIN Mouseout erzeugen soll, wenn ich lediglich über eines ihrer Kindelemente fahre. Wer weiß Rat?
Hier ein stark vereinfachtes Beispiel mit nur einer Zelle und Text statt Grafik (Problem bleibt dasselbe):
<html>
<head>
<title>Test</title>
<script language="JavaScript">
var temp = "";
function zeigeDrei(zelle) {
temp = zelle.innerHTML;
zelle.innerHTML = "<a href='1.html'>1</a> <a href='2.html'>2</a> <a href='3.html'>3</a>";
}
function zeigeEins(zelle) {
zelle.innerHTML = temp;
}
</script>
</head>
<body>
<table style="border:solid black 1px;width:100px;height:100px;text-align:center;vertical-align:middle">
<tr>
<td align="center" onMouseover="zeigeDrei(this)" onMouseout="zeigeEins(this)">1</td>
</tr>
</table>
</body>
</html>
Gernot Back