StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 87
|
 |
 |
 |
|
87.
Formularbuttons mit HOVER-Effekt (12.04.2002)
HOVER-Effekte werden häufig Links oder Bildern zur optischen Aufwertung einer Website zugeordnet. CSS2 bietet dazu die Pseudoklasse :HOVER. Diese lässt sich nicht nur
in der Form A:HOVER einsetzen, sondern u. a. auch in Verbindung mit INPUT-Elementen: INPUT:HOVER.
Voraussetzung sind natürlich Browser, die überhaupt in der Lage sind, Stylesheet-Formatierungen auf Formularelemente anzuwenden (IE, Netscape 6.x, Mozilla, Konqueror, aber nicht Opera und Netscape 4.x).
Die Umsetzung der HOVER-Zuweisung mit INPUT-Elementen zeigt zurzeit jedoch nur in Browsern mit der Gecko-Engine Wirkung. Im Beispiel 87 wurde deshalb eine zusätzliche JavaScript-Funktion
definiert, die den Effekt via OnMouseOver/OnMouseOut nachliefert.
CSS-Code:
INPUT.button1
{
Color: #FFFFFF;
Background-Color: #FF0000;
}
INPUT.button1:hover
{
Color: #FFFF00;
Background-Color: #0000CC;
}
JavaScript-Funktion:
function NeueFarbe(obj,fgcol,bgcol)
{
if(obj.style)
{
obj.style.color=fgcol;
obj.style.backgroundColor=bgcol;
}
}
Markup:
<INPUT TYPE="button" CLASS="button3" VALUE="Button 3"
OnMouseOver="NeueFarbe(this,'#000000','#FEDCBA')"
OnMouseOut="NeueFarbe(this,'#FFFFFF','#000000')">
Erweiterungen sind möglich, z. B. die Veränderung des Mauszeigers über die CSS-Eigenschaft Cursor (siehe Tipp 11). |
|
 |
|
 |