In diesem Online-Tutorial wird beschrieben wie man Rollover-Buttons (bzw. Mouseover-Buttons erstellt. Dabei geht es um die grafische Umsetzung und weniger um die programmiertechnische Realisierung.

Begriffserklärung - Rollover-Buttons

Was sind eigentlich Rollover-Buttons? Rollover-Buttons bezeichnet man Schaltflächen auf Webseiten, die sich verändern, wenn man mit der Maus darüberfährt (und auch bei anderen Aktionen). Der damit erzielte Effekt wird auch Mouseover-Effekt genannt. Ihr könnt es hier gleich ausprobieren - die horizontale Navigationsleiste auf dieser Website (direkt unter dem Titelbanner), besteht nämlich auch aus Rollover-Buttons. Falls sie sich nicht verändern, wenn Ihr mit der Maus darüberfahrt, könnte es daran liegen, dass Ihr noch eine ältere Browser-Version auf Eurem Rechner habt (Internet Explorer, Firefox oder was auch immer Ihr benutzt).

Funktionsprinzip - Rollover-Buttons

Oft wird die Rollover-Funktion benutzt, um Buttons leuchten zu lassen oder er wird grafisch eingedrückt oder ähnliches. Das Funktionsprinzip eines Rollover-Buttons ist relativ einfach. Die Grafik-Datei, die den Button darstellt, wird sobald die Maus über der jeweiligen Schaltfläche liegt durch eine andere Grafik ausgetauscht. Die erste Grafik kann zum Beispiel den normalen Button darstellen, während die zweite "Auswechsel"-Grafik den leuchtenden Button darstellt.

Erstellung von Rollover-Buttons

Wenn Ihr das Funktionsprinzip eines Rollover-Buttons verstanden habt, wisst Ihr bereits, dass man für diesen Effekt zwei Grafiken braucht. Dies ist eigentlich auch schon alles, also wäre ich hier schon fertig :-). Na gut, aber ich möchte Euch nicht einfach so stehen lassen und versorge Euch mit noch ein paar Tipps und Tricks zur Erstellung der Rollover-Buttons.

Ich zeige zur Veranschaulichung einfach mal die Buttons, die ich für diese Website erstellt habe. Als Grafik-Software habe ich außerdem Adobe Photoshop Elements und ein Grafik Tablett von Wacom verwendet.

Hier gleich mal ein kleiner Tipp: Es ist empfehlenswert, darauf zu achten, dass die Grafiken immer die gleichen Abmessungen haben (Höhe x Breite). Ansonsten kann es beim Rollover-Effekt zu Verschiebungen im ganzen Webdesign kommen oder andere Probleme auftreten.

Mein Ziel war es, dass sich die Buttons nach unten vergrößern und die Schrift aufleuchtet, wenn man mit der Maus darüberfährt. Außerdem wollte ich als kleinen Gag, dass sich ein Icon auf dem Button mitverändert. Hier sind meine kleinen Meisterwerke:

Wie Ihr seht ist es ganz einfach die Buttons zu gestalten. Man muss (zumindest in diesem Beispiel) einfach nur die Schriftgröße und -farbe im jeweiligen Grafikprogramm verändern und das Bild in beiden Versionen abspeichern. Bei meinen Buttons klappt z.B. auch ein Buch auf oder Schrift erscheint in einer Sprechblase etc. Es sind endlos viele Effekte mit den Rollover-Buttons realisierbar mit ein bisschen Kreativität.

Damit ich die Höhe der Grafiken nicht ändern musste, habe ich bei den normalen Grafiken immer einen blauen Balken am untern Ende gelassen, der dieselbe Farbe hat wie der Hintergrund der Website.
Die ersten Versionen haben mir nicht gefallen, da sie sehr flach und irgendwie langweilig ausgesehen haben. Darum habe ich noch einen leichten Schatten am oberen Ende gemalt, der nur zwei Pixel hoch ist und einen dezenten Farbverlauf am unteren Ende der Buttons. Diese Schatteneffekte haben relativ viel Wirkung, was das Design angeht. Sehr empfehlenswert.

Wie bereits gesagt geht es mir hier nicht um die Umsetzung von Seiten der Programmierung. Dies ist auch nicht Thema dieser Webseite. Aber es sei soviel gesagt, dass ich die Buttons mit CSS umgesetzt habe. Wer sich mehr für die programmiertechische Umsetzung der Rollover-Buttons interessiert, sollte mal zu selfhtml.org schauen.
Hier ist ein passender Link zur Programmierung von Rollover-Buttons: Rollover-Buttons mit CSS