mouseover bei Zellen
Mittels der event handler onmouseover
und onmouseout kannst Du ganz leicht einen Hovereffekt für
Zellen erzeugen. Viel einfacher ginge dasselbe auch per
CSS, aber leider kann
der veraltete Internet Explorer auch in der Version 6 nur beim
a-Element mit Pseudoklassen umgehen. Deshalb muß dies,
zumindest solange, wie Microsoft keinen sinnvollen Browser herausbringt,
mit JavaScript erledigt werden. Ich empfehle, auf derartige Effekte für den
IE zu verzichten – die nächste Version wird CSS hoffentlich ausreichend
beherrschen; bis dahin müssen die Benutzer altertümlicher Browser nunmal
auf kleine Effekte verzichten.
Und hier der Quelltext:
<div style="text-align:center;"> <table style="padding:0;width:95px;border-spacing:5px;margin:auto;"> <tbody> <tr> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#0000ff'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#ffff00'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#ff00ff'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> </tr> <tr> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#00ffff'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#00ff00'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#0ffff0'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> </tr> <tr> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#0f0f0f'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#f0f0f0'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> <td style="height:25px;background-color:#ff0000;" onmouseover="this.style.backgroundColor='#c00000'" onmouseout="this.style.backgroundColor='#ff0000'"> </td> </tr> </tbody> </table> </div>
Viel Spaß!