Hovereffekte bei Links sind ein beliebter Effekt für die Gestaltung von Navigationen: Beim Überfahren des Links mit dem Mauszeiger ändert ein Link sein Aussehen. Dieser Effekt wird gerne durch das Austauschen von Hintergrundgrafiken umgesetzt, aber leider kommt es je nach Browser und Internetanbindung zu einer mehr oder weniger kurzen Verzögerung beim Nachladen der Hintergrundgrafiken.

Wie man diesen Hovereffekt mit Hilfe von Hintergrundgrafiken – aber ohne Verzögerungszeiten – hinbekommt, erklärt das Tutorial zu CSS-Sprites, das von den Webkrauts veröffentlicht wurde.

Die Technik ist leicht für verschiedenste Hintergründe abzuwandeln. Ob man wie hier die vertikale Version der Verschiebung einsetzt oder den gleichen Effekt mit horizontaler Verschiebung (und natürlich entsprechender Grafik) erreicht, ist Geschmacksache. Mit kleiner Erweiterung ist auch noch problemlos zusätzlich ein »Visited«-Effekt zu realisieren.

Link zum Artikel

Einen weiteren Artikel zum Thema findet man auf der Seite A List Apart.

Link zum Artikel