Christoph Schüßler

CSS Image Rollover - Final Words

In zwei Tutorials hatte ich bereits vorgestellt, wie sich Rollover, also Grafik-Links, die sich beim überfahren mit der Maus ändern, am besten per CSS gestalten lassen. Dieses Tutorial geht noch einen letzten Schritt weiter und fügt eine Kleinigkeit hinzu, die bisher fehlte: den Linktext.

In den vorherigen Tutorials und Beispielen hatte ich diesen weggelassen, damit die Hintergrundgrafiken, die einem Rollover-Link per CSS zugewiesen werden, nicht vom Linktext, also dem Text zwischen dem öffnenden und schließenden <a>, überlagert werden.

Unschön! Der entstehende Code hat keine semantische Aussagekraft, von derSuchmaschinenfreundlichkeit ganz zu schweigen. Außerdem zeigen ältere Browser bei Einsatz dieser Technik dann gar nichts an, der Link wird also unsichtbar für den Benutzer. Kurz gesagt: ein Link sollte immer einen Ankertext haben.

Hier also der Code verbesserte Rollover-Code:

Linktext 1

a.rollover {
	display: block;
	float: left;
	width: XYpx; /* Breite einer Rollover-Status-Grafik  */
	height: 0px !important;
	padding-top: XYpx; /* Höhe einer Rollover-Status-Grafik */
	overflow: hidden;
}
#rollover1 {
	background: url(rollover.png) no-repeat left 0px;
}
#meinRollover1:hover {
	background: url(rollover.png) no-repeat left -XYpx; /* Höhe einer Rollover-Status-Grafik (negativ) */
}
#rollover1:active {
	background: url(rollover.png) no-repeat left -XYpx; /* doppelte Höhe einer Rollover-Status-Grafik (negativ) */
}

Dabei verwende ich wieder eine Grafik, in der die drei Rollover-Stati übereinander in einer einzigen Datei abgespeichert sind, die dann jeweils nur in ihrer Position als Hintergrundgrafik der Links verschoben wird. Dies geschieht durch die Angabe des negativen Abstands in Pixeln zum oberen Rand der Grafik. Neu ist, dass der Linktext zwar da ist, durch die CSS-Anweisungen aber so weit nach unten verschoben wird, dass er nicht mehr über der Grafik liegt, sondern unsichtbar wird.

Wie das Ergebnis genau aussieht, zeigt dieses Beispiel.

Kompatibel mit folgenden Browsern:

• Mozilla 1.7
• Firefox 1+
• Opera 9+
• Safari (Windows) 3+
• Internet Explorer 6+ (allerdings keine Anzeige des dritten Status :active)