Hintergrundfarbe von Tabellenzellen ändern per Mouseover

womstar · 24. März 2003

Oft gestellte Frage, aber immer ein und die selbe Antwort...
Wie ändert man die Hintergrundfarbe einer Tabellenzelle per Mouseover.

Nichts leichter als das.
Es gibt wie immer mehrere Möglichkeiten.

1. Man schreibt den Farbwechsel der Zelle direkt an Ort und Stelle. Wobei man hier mit CSS arbeiten kann, aber auch ohne.

Ohne CSS (es wird auf das normale HTML-Attribut zugegriffen):

Code:

<table width="100" height="30">
<td bgcolor="cccccc" [COLOR=red]onmouseover="this.bgColor='ff0000'" onmouseout="this.bgColor='cccccc'"[/COLOR]> </td>
</table>

Mit CSS (es wird auf die CSS-Eigenschaft zugegriffen):

Code:

<table width="100" height="30">
<td bgcolor="cccccc" [COLOR=red]onmouseover="this.style.backgroundColor='ff0000'" onmouseout="this.style.backgroundColor='cccccc'"[/COLOR]> </td>
</table>

2. Kann man auch dies mit einer Funktion lösen, um sich ein wenig weniger Schreibarbeit zu verschaffen. Auch hier besteht die Möglichkeit mit CSS auf die Zelle Einfluss zu nehmen und ohne CSS das Ganze zu realisieren.

Ohne CSS:

Code:

<html>
<head>[COLOR=red]
<script language=javascript>
function farbWechsel(typ,farbe)
{
	typ.bgColor=farbe;
}
</script>[/COLOR]
</head>

<body>
<table width="100" height="30">
<td bgcolor="cccccc" [COLOR=red]onmouseover="farbWechsel(this,'ff0000')" onmouseout="farbWechsel(this,'cccccc')"[/COLOR]> </td>
</table>
</body>
</html>

Mit CSS:

Code:

<html>
<head>[COLOR=red]
<script language=javascript>
function farbWechsel(typ,farbe)
{
	typ.style.backgroundColor=farbe;
}
</script>[/COLOR]
</head>

<body>
<table width="100" height="30">
<td bgcolor="cccccc" [COLOR=red]onmouseover="farbWechsel(this,'ff0000')" onmouseout="farbWechsel(this,'cccccc')"[/COLOR]> </td>
</table>
</body>
</html>

Frage geklärt? ja? super, na dann fröhliches Farbwechseln

salü womstar

j-l-n · 11. Nov. 2014

"Heutzutage" macht man das mit CSS (:hover):

Code:

td {
  background-color: #cccccc;
}
td:hover {
  background-color: #ff0000;
}

rico2009 · 12. Nov. 2014

Kann man so machen. Dir ist aber schon klar, dass das uralt HTML ist. Die Attribute bgColor und co sollten nicht mehr verwendet werden.

j-l-n · 12. Nov. 2014

rico2009 schrieb:
Kann man so machen. Dir ist aber schon klar, dass das uralt HTML ist. Die Attribute bgColor und co sollten nicht mehr verwendet werden.

Worauf bezieht sich das jetzt?

Hintergrundfarbe von Tabellenzellen ändern per Mouseover

womstar

Lounge-Member

j-l-n

Guest

rico2009

Guest

j-l-n

Guest