Tabellenzellen-Rollover

Sehr schön: Rollover-Effekt an Tabellenzellen. Das heißt, du kannst Text-Links in einer Tabelle haben und brauchst auf ein bissel Geblinker nicht zu verzichten! Schau her:

Achtung: Es funktioniert im IE und Netscape 6.2, jedoch nicht in Netscape 4.x und Opera 5.12!

Und so geht das:

Folgender Code ist die Tabelle:

<table border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td bgcolor="#333333" onMouseOver="this.bgColor='#ffffff'" align="left"onMouseOut="this.bgColor='#333333'" nowrap>
<p class="p2">Eine Zelle </p>
</td>
</tr>
<tr>
<td bgcolor="#333333" onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#333333'" nowrap>
<p class="p2">Noch eine Zelle</p>
</td>
</tr>
<tr>
<td bgcolor="#333333" onMouseOver="this.bgColor='#ffffff'" onMouseOut="this.bgColor='#333333'" nowrap>
<p class="p2">Und die dritte Zelle</p>
</td>
</tr>
</table>

Erklärung zum Script:

<td bgcolor="#333333"

Hier beginnt die Zelle mit der Hintergrundfarbe 333333 ( ein Dunkelgrau)

onMouseOver=

Wenn die Maus drüberfährt,

"this.bgColor='#ffffff'"

'this' nimmt einfach auf das aktuelle Objekt Bezug - in unserem Falle die Tabellenzelle TD und bgColor, die Hintergrundfarbe wird auf FFFFFF (weiß) gesetzt.

align="left" onMouseOut="this.bgColor='#333333'" nowrap>

Die Tabellenzelle ist linksbündig und beim Rausfahren mit der Maus wird die Zellenhintergrundfarbe auf 333333 gesetzt - wieder unser Dunkelgrau, womit die Zelle ja auch vorher definiert war.