Button mit hover-Effekt und nur einer Bilddatei

Ein hover-Effekt kann für Button auf verschiedene Art und Weise realisiert werden. Eine Variante wäre, beim Überfahren des Buttons mit der Maus (hover) das Bild auszutauschen. Nachteil dieser Variante ist es, dass Sie in Summe zwei Bilder laden müssen, d.h. zwei Serveranfragen (Requests) und es ist ein größeres Datenvolumen zu übertragen. Da es aber immer ein Ziel sein sollte, die Anzahl der Requests und das zu übertragende Datenvolumen so gering wie möglich zu halten, ist es die wesentlich elegantere Art, den hover-Effekt mit nur einem Bild zu realisieren.

Das folgenden Beispiel soll das Prinzip veranschaulichen.

Generell gilt:

Die notwendigen Stylesheet-Angaben sind idealerweise in einer separaten Datei abzulegen und einzubinden.

Schritt 1 - Erstellung einer Grafik, die beide Zustände eines Buttons enthält

• Der Button in diesem Beispiel hat eine Gesamtgröße von 104x56 Pixel.
• Die obere Hälfte repräsentiert den Button im Normalzustand.
• Der untere Hälfte ist für den hover-Effekt des Buttons vorgesehen.

Schritt 2 - Erzeugung der Stylesheets für den Button mit hover-Effekt

Schritt 3 - Zuweisung der Stylesheet-Klasse an den Button

Ergebnis:

• Er wird somit beim hover nicht Anderes gemacht, als den Button-Hintergrund zu verschieben.
• Ein Nachladen eines zusätzlichen Bildes ist nicht notwendig.
• Da diese Variante rein auf CSS basiert, sind Javascript-Einstellungen irrelevant.
• Somit ist auch sichergestellt, dass dieser Effekt bei ausgeschaltetem Javascript funktioniert.
• Bei älteren Browsern, die auf hover noch nicht reagieren, ist lediglich dieser Effekt unsichtbar. Die Funktionalität der Seite insgesamt wird aber nicht eingeschränkt.