Farbe der Tabellenzeile bei Mouseover und -out ändern
Aus Gründen der besseren Lesbarkeit ist es sinnvoll, dass sich Tabellenzeilen bei Berührung mit der Maus in ihrer Farbe ändern. Beim Verlassen der Tabellenzeile soll natürlich wieder die ursprüngliche Farbe hergestellt werden.
Dies lässt sich mit etwas JavaScript umsetzen.
Im HTML Tag für die Zeile <tr> wird zuerst die Grundfarbe festgelegt:
<tr bgcolor="#E1E1E1">
Anschließend wird per JavaScript für die Zeile festgelegt, was beim Berühren
und beim Verlassen der Zeile an Farbänderungen erfolgen soll. Hierzu werden die
Funktionen onMouseOver und onMouseOut verwendet. Durch
this.bgColor werden die
Farbänderungen zugewiesen:
<tr bgcolor="#E1E1E1" onMouseOver="this.bgColor='#CCCCFF'" onMouseOut="this.bgColor='#E1E1E1'">
Beispiel (mit der Maus über die Zeilen fahren):
| Spalte 1 | Spalte2 |
|---|---|
| Zeile 1 Text 1 | Zeile 1 Text 2 |
| Zeile 2 Text 1 | Zeile 2 Text 2 |
| Zeile 3 Text 1 | Zeile 3 Text 2 |
Die oben genannten Festlegungen müssen für jede einzelne Zeile vorgenommen werden. Es besteht dadurch auch die Möglichkeit, für jede Zeile eine andere Farbänderung vorzunehmen.
Diese Methode ist zur Zeit noch HTML konform. Demnächst wird jedoch bgcolor
nicht mehr HTML Standard sein, da es von der W3C als deprecated
eingestuft ist.
