6B Logo

CSS-Buttons ohne Geflacker

Menüleisten, Buttons etc. mit reinen CSS-Anweisungen zu realisieren hat sich längst auf breiter Front durchgesetzt, schließlich spricht eine ganze Menge dafür. Vielfach dokumentiert ist auch der Einsatz von Hintergrundbildern, mit denen sich Navigationselemente frei gestalten lassen, ohne die Zugänglichkeit des HTML-Markups damit aufzuweichen.

Der Austausch von Hintergrundbildern beim MouseOver wurde zu früheren Zeiten meist mit JavaScript realisiert, auch diese Aufgabe lässt sich dank der CSS-Pseudoklasse :hover leicht lösen. Die allermeisten der einschlägigen Artikel und Tutorials weisen dabei zurecht auf eine ärgerliche Besonderheit hin, dem Flackern (oder »Flashen«) des Bildes beim Austausch, weil es erst beim Darüberfahren mit der Maus nachgeladen wird und somit verzögert erscheint. Als Ausweg werden unterschiedliche Preloader-Modelle gehandelt, auch dieses Spiel kennen wir schon aus JavaScript-Zeiten. Der Nachteil aller Preloader: sie sind vergleichsweise aufwendig und in manchen Explorer-Umgebungen funktionieren sie nicht zuverlässig, die Bilder flackern auch noch, wenn sie längst geladen sind.

Dabei gibt es eine wesentlich einfachere Lösung, die in jedem gängigen Browser butterweich läuft und die Anzahl der beteiligten Grafiken halbiert. Als Beispiel nehmen wir eine gewöhnliche Linkliste. Bevor wir uns dem Code zuwenden, hier erst mal das Ergebnis:
 

Das Markup: 

<ul>
<li id="main-1"><a href="ziel_1.html">Punkt 1</li>
<li id="main-2"><a href="ziel_2.html">Punkt 2</li>
<li id="main-3"><a href="ziel_3.html">Punkt 3</li>
</ul>

Im CSS werden die Menütexte aus dem Blickfeld gerückt, dann die Höhe und Breite der Punkte festgelegt, idealerweise entsprechen sie den Abmessungen des Bildes. Zum Schluss folgen die Background-Eigenschaften: 

#main-1 a, 
#main-2 a, 
#main-3 a  {
   display: block;
   text-indent: -2000px;
   width: 170px;
   height: 27px;
   background: 0 0 no-repeat;
}

#main-1 a  {
   background-image: url(bild_1.gif);
}

#main-2 a  {
   background-image: url(bild_2.gif);
}

#main-3 a  {
   background-image: url(bild_3.gif);
}

Bei den meisten Lösungen wird nun das Bild mit :hover ausgetauscht, etwa so: 

#main-1 a:hover  {
   background-image: url(bild_1_over.gif);
}

Bei den meisten Lösungen wird nun das Bild mit :hover ausgetauscht, etwa so: 

#main-1 a:hover	{
   background-image: url(bild_1_over.gif);
}

In unserem Fall wird es nicht ersetzt, sondern verschoben. Der Blick auf das vollständige Bild macht es deutlich:

Aufbau des Hintergrundbildes

Zustand 1 und 2 sind beide im selben Bild enthalten, mit :hover werden lediglich die Koordinaten verschoben. In unserem Beispiel nach links, genauso gut könnte man es aber auch nach rechts, oben oder unten verschieben. Beim MouseOver ist es in jedem Fall schon geladen und flutscht folglich ohne Zicken. Da die Bilder bei allen Punkten gleich groß sind, kann die Angabe zusammengefasst werden: 

#main-1 a:hover, 
#main-2 a:hover,
#main-3 a:hover	{
   background-position: -170px 0;
}

Das ist schon die ganze Kunst. Falls Sie es nicht längst bemerkt haben: ein Praxisbeispiel dieses Prinzips sehen Sie auch rechts oben, das Hauptmenü unserer Site ist ebenfalls so aufgebaut.

Journal abonnieren