preload
Jul 08

Häufig werden für Buttons, die einen Hintergrund haben (also ein Bild) und sich beim MouseOver ändern sollen, img-Tags verwendet. Um Beim Klick eine Aktion auszuführen wird das onclick-Ereignis ergänzt. Der Text des Buttons steht dabei in den Bildern. Doch das geht auch anders…

Ein einziges img-Tag

Die oben beschriebene Variante verwendet höchstwahrscheinlich ein Markup in dieser oder ähnlicher Form:

<img src="img/button_hallo_normal.png"
     onmouseover="this.src='img/button_hallo_hover.png';"
     onmouseout="this.src='img/button_hallo_normal.png';"
     onclick="alert('Hallo!');"
     title="Ich sage 'Hallo'."
     alt="Was stelle ich eigentlich dar?" />

Üblicherweise steht das img-Tag in einer Zeile und wird somit sehr lang. Möglicherweise stehen die wichtigen Attribute sogar außerhalb des sichbaren Bereiches und wenn nicht gescrollt wird, wird im Quelltext nicht erkennbar, dass dieses Bild auch eine Funktion hat – und zwar die sinnvolle Funktion, zu Demozwecken ‚Hallo‘ zu sagen 🙂

Etwas mehr Semantik – Bild im Link

Da dieses Element etwas tut, wenn man es anklickt, ist es sinnvoll, es in einen Link zu stecken und die Aktion beim Link auszuführen. Ein button-Element wäre hierfür rein semantisch gesehen wohl noch besser geeignet, jedoch wird später deutlich, dass der Link die bessere Wahl ist. Hier das Markup:

<a href="javascript:alert('Hallo!');void(0);" title="Ich sage 'Hallo'.">
  <img src="img/button_hallo_normal.gif"
       onmouseover="this.src='img/button_hallo_hover.png';"
       onmouseout="this.src='img/button_hallo_normal.png';"
       alt="Button-Bild im Link der 'Hallo' sagt." />
</a>

Weniger Markup – Ein Link mit Klasse

Links eignen sich hervorragend, um Hover-Effekte zu erzeugen, da sie, entgegen der Spezifikation des W3C, das einzige HTML-Element darstellen, für das die CSS-Pseudo-Klasse :hover in allen Browsern ausgewertet wird. Dadurch muss die Änderung des src-Attributes beim MouseOver nicht als Javascript-Aufruf in den Quelltext geschrieben werden, sondern kann per CSS als Hintergrundbild abgedeckt werden.
Durch das Ergänzen eines span-Elementes innerhalb des Links (ein div-Element wäre nicht XHTML-konform) kann der Button außerdem beliebige Breiten annehmen und die Beschriftung als Text enthalten. Dazu muss man bspw. die linke Rundung und den mittleren Bereich des Bildes (sollte die maximale Breite abdecken) in ein erstes Bild stecken und die rechte Rundung in ein zweites. Das Markup sieht dann nur noch wie folgt aus:

<a class="flexible-button"
   href="javascript:alert('Hallo!');void(0);"
   title="Ich sage 'Hallo'."><span>Sage Hallo!</span></a>

Für die Korrekte darstellung sorgen folgende Style-Angaben:

* {
  font-family: Sans-Serif;
}

.flexible-button {
  display: block;
  border: none;
  text-decoration: none;
  padding: 0;
  float: left;
  background: lightblue url(img/button_normal_left.png) top left no-repeat;
}

.flexible-button span {
  display: block;
  float: left;
  padding: 12px 15px 12px 15px;
  font-size: 20px;
  color: darkblue;
  background: transparent url(img/button_normal_right.png) top right no-repeat;
}

.flexible-button:hover {
  background: lightgreen url(img/button_hover_left.png) top left no-repeat;
}

.flexible-button:hover span {
  cursor: hand;
  cursor: pointer;      
  color: darkgreen;
  background: transparent url(img/button_hover_right.png) top right no-repeat;
}

Vorteile

  • Das verringerte Markup erhöht die Lesbarkeit des Quelltextes.

    Darüber freuen sich nicht nur Suchmaschinen, sondern auch die Menschen, die den Code eines Tages warten müssen.

  • Die Button-Beschriftung ist als Text hinterlegt.

    Der Text wird von Suchmaschinen gefunden und es muss nicht bei jeder Änderung des Textes ein Grafikprogramm bemüht werden.

  • Der Button ist flexibel.

    Durch die Aufteilung des Hintergrundbildes in zwei Bilder kann der Button in die Breite wachsen. Mit der einen CSS-Definition können mehrere dieser Buttons mit unterschiedlichen Beschriftungen auf einer Seite dargestellt werden, ohne auch nur ein zusätzliches Bild zu erstellen.

  • Die Buttons sind auch ohne Bilder gut benutzbar.

    Dadurch, dass beim Hintergrund im Stylesheet ähnliche Farben angegeben wurden, wie sie in den Bildern enthalten sind, sehen die Buttons auch ohne Bilder immernoch ähnlich aus. Bei den beiden ersten Varianten ist das nicht unbedingt der Fall.

  • Ein Stylesheet für alle Browser.

    Dieses Beispiel funktioniert nicht nur in allen aktuellen Browsern, sondern leistet ohne Anpassungen selbst im IE6 und IE5.5 noch problemlos seine Dienste. Zumindest abgesehen davon, dass der IE5.5 cursor: pointer; noch nicht kennt und cursor: hand; benötigen würde 🙂

Demo

Hier klicken, um eine Demo aufzurufen.

Hier klicken, um eine Demo mit fehlenden Bildern aufzurufen.

4 Responses to “Buttons mit Bild und Hover-Effekt”

  1. css gameserver Says:

    Hallo, ich würde gerne wissen ob mir mal einer helfen kann wie man einen CSS Server erstellen kann ? Und ob mein server dann etwas kosten tut ? Oder geht das mit z.B. Sponsoren ??? Währe toll wenn ich per email oder hier in den Kommis eine Antwort für mein Vorhaben bekommen würde. 2l3oigf7

  2. einfranzose Says:

    vielen Dank für den Code.

  3. Der Webdesigner Says:

    Danke für diesen Beitrag. Problem bei mir ist aber noch, dass das Hintergrundbild ein ganz klein wenig länger zum Laden braucht, als sich z.B. der Text auf dem Button in der Farbe ändert… Hat jemand einen Tipp?

  4. Braintec Says:

    Hallo zusammen,
    ich habe mir vor kurzen eine neue Header Grafik erstellt und
    sie gleich auf meinen Webspace geladen auf dem ich einen Kleingenmarkt
    betreibe.

    Die beiden Grafiken

    ( Einmal mit Text )

    Hauptverzeichnis/Unterverzeichnis/anzeigen/gfx/BGLOGOcyan.jpg

    und ( einmal ohne Text )

    Hauptverzeichnis/Unterverzeichnis/PSD/BGLOGOcyan.bmp

    Hauptverzeichnis/Unterverzeichnis/PSD/BGLOGOcyan.psd

    habe ich in die dafür vorgesehenden Verzeichnisse per FTP ( FileZilla )
    geladen.

    Für die Darstellung verwende ich ein css style.

    Es ist mir aufgefallen das im Firmen User Bereich, beim Besuch des Shops

    nur der Header mit Text zu sehen war,obwohl in der Original Installation

    der Header ohne Text zu sehen ist.

    Ich habe zur Überprüfung im Admin Bereich die 7 zu Verfügung stehenden

    css styles ausprobiert und festgestellt das dieser Fehler auch hier

    auftaucht, obwohl ich dort keine veränderungen vorgenommen habe.

    Ist es möglich das bei der Datenübertragung die css Datei beschädigt
    wurde?

    Welche Datei Steuert die css style?

    Ich bedanke mich schon jetzt für Ihre schnelle Hilfe.

Leave a Reply

You must be logged in to post a comment.