Ruckelfreier Hovereffekt mit CSS

Für ein neues Webseitenprojekt wollte ich für einen Link zwei Grafiken verwenden. Eine für den Link, in der normalen Darstellung und eine für den Hovereffekt, also wenn der Mauszeiger sich über dem Bild befindet. Zuerst hatte ich es so gelöst, dass ich einmal für den Tag a ein Bild angegeben habe und ein zweites für a:hover. Es funktioniert auch, nur leider mit einem großen Nachteil. Da die Grafik erst geladen wird, wenn der Mauszeiger den Hovereffekt auslöst, dauert dies einen Moment und es scheint als ob die Grafik einmal „blinkt“.

In einem Buch fand ich jetzt eine clevere Lösung. Anstatt mit zwei Grafiken, arbeitet man nur noch mit einer einzigen. Diese enthält jedoch beide Bilder untereinander. Zur Demonstration habe ich eine HTML-Seite erstellt: Beispiel anzeigen

Der Effekt wird durch ein einziges Bild erzeugt. In meinem Fall sieht es so aus:

Im Grundprinzip ist es ganz einfach. Ich binde diese Grafik per CCS als Hintergrundgrafik für den a Tag ein. Der Bereich für die Anzeige des Bildes wird so definiert, dass im normalen Zustand nur der grüne Bereich sichtbar ist. Bei a:hover wird über background-position das Bild mit einem negativen Wert nach oben „geschoben“, somit ist nur der untere Bereich in lila zu sehen. Bei dieser Variante kann es zu keinem blinken kommen, da die Grafik bereits komplett von Anfang an geladen und vorhanden ist und lediglich verschoben wird.

Der HTML & CSS-Code dazu sieht dann z.B. so aus:

<style type="text/css">
<!--
a {
   background: url(hover.jpg) no-repeat 0px 0px;
   height:20px;
   width:148px;
   padding:15px;
   display:block;
   text-align:center;
   color:#fff;
   text-decoration:none;
}

a:hover {
   background-position:0px -50px;
   color:#fff;
   text-decoration:underline;
}
-->
</style>

Der Link wird dann wie immer einfach eingetragen:

<a href="#" title="Hoverbeispiel">Zurück</a>

Über Torsten
Mein Name ist Torsten. Ich hoffe der Artikel hat dir gefallen und über ein Feedback von dir würde ich mich sehr freuen.

Hinterlasse jetzt einen Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen", um Ihnen das beste Surferlebnis möglich zu geben. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen zu verwenden fortzufahren, oder klicken Sie auf "Akzeptieren" unten, dann erklären Sie sich mit diesen.

Schließen