Sie befinden sich hier:
» 
» 
27.12.2010

Button mit hover-Effekt und nur einer Bilddatei

Kategorie(n): HTML und CSS Tipps

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

<style type="text/css">
  .btnSubmit {
    width: 104px;
    height: 28px;
    margin: 0px;
    padding:0px;
    background: url(./image/senden.png) no-repeat top left;
  }
  .btnSubmit:hover{
    background-position: 0 -28px;
  }
</style>

Schritt 3 - Zuweisung der Stylesheet-Klasse an den Button

  <input class="btnSubmit" name="submit" type="submit" value=""/>

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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

9