StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 40
|
 |
 |
 |
|
40.
Hintergrundfarbe von Tabellenzellen ändern (29.10.2000)
Das Beispiel zu diesem Tipp wurde bereits mehrfach auf entsprechende Anfragen in diversen Newsforen gepostet. Deshalb soll es hier ebenfalls seinen Platz erhalten.
Browser, die die CSS-Pseudo-Klasse :HOVER unterstützen, kann man sehr einfach "beibringen", bei Mausberührungen von Links oder anderen
HTML-Elementen, Vorder- und Hintergrundfarbe zu wechseln. Leider funktioniert diese einfache Methode nicht unter Netscape 4.x. Immerhin kann man auch bei diesem Browser
eine Art HOVER-Effekt realisieren, wobei sich eben nur die Hintergrundfarbe verändert. Alternativ kann man auch den Inhalt einer Ebene dynamisch ersetzen.
Das folgende Script zeigt die Implementierung für Netscape 4.x und 6 sowie den MSIE. Die Unterschiede liegen in der Referenzierung über object.bgColor bzw. object.style.backgroundColor.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function NeueFarbe(Nr,tf)
{
var TDID, COLtrue="#FFFF00", COLfalse="#FFFFCC";
TDID="box"+Nr;
if (document.all && !document.getElementById) // IE 4
{
if (tf=="true")
{
document.all[TDID].style.backgroundColor=COLtrue;
}
else
{
document.all[TDID].style.backgroundColor=COLfalse;
}
}
if (document.getElementById) // IE 5.x und NN 6 (Opera, theoretisch ;-)
{
if (tf=="true")
{
document.getElementById(TDID).style.backgroundColor=COLtrue;
}
else
{
document.getElementById(TDID).style.backgroundColor=COLfalse;
}
}
if (document.layers) // NN 4.x
{
if (tf=="true")
{
document.layers[TDID].bgColor=COLtrue;
}
else
{
document.layers[TDID].bgColor=COLfalse;
}
}
}
//-->
</SCRIPT>
Der Funktionsaufruf erfolgt über die OnMouseOver- bzw. OnMouseOut-Eventhandler von Links, die innerhalb von TD-Tags platziert werden.
<A HREF="tips/test.htm" TARGET="test"
OnMouseOver="NeueFarbe(1,'true')" OnMouseOut="NeueFarbe(1,'false')">
Text 1</A>
|
|
 |
|
 |