Sie sind hier: Home > Tricks > Javascript > Mouse Ove...

Mouse Over Buttons

Stand vom 28.03.2002
Mouse Over Effekte mit Formularbuttons.

Fachbegriffe
 Linktipps
Werbung  GPS Navigation   Webhosting inkl. Domain   AWD Erfahrung

Mit einem einfachen, kleinen JavaScript erzeugt man mit normalen Formularbuttons
Hover Buttons.

<input type=button
value="Suchen"
style="background: darkblue; font-size: 12px; cursor:hand; color: white;"
onmouseover="this.style.background='green'; this.style.color='yellow';"
onmouseout="this.style.background='darkblue'; this.style.color='white';">

Das eigentliche Skript ist hier bei den Eventhandlern versteckt.
Bei "onmouseover" wird über den Befehl this.style.background die Hintergrundfarbe
verwendet. Mit this wird immer das aktuelle Element angesprochen. In diesem Fall
also der Button. Mit der zweiten Anweisung bei onmouseover (this.style.color)
wird die Farbe des Inhaltes des Buttons definiert.

Bei onmouseout, also beim Verlassen des Objektes mit der Maus wird wieder über
die zwei Anweisungen der Anfangszustand hergestellt.