Im letzten Artikel hatte ich beschrieben, wie sich durch Kombinieren von mehreren Rollover-Grafiken in eine Datei erstens Dateigröße und zweitens Reaktionszeit des Rollovers verringern lassen. In diesem Artikel möchte ich diese Taktik auf die Spitze treiben. Wir werden drei Rollover in einer Datei kombinieren und so die Dateigröße weiter drücken – das ganze natürlich Standardkompatibel und ohne JavaScript.

CSS bietet zur Positionierung von Hintergrundgrafiken die 5 Werte left, right, top, bottom und center, wobei center sowohl vertikale als auch horizontale Positionierung einschließt. Aus diesen 5 Werten lässt sich also eine Matrix mit 9 verschiedenen Positionen erstellen:

Genau wie diese Matrix lässt sich auch eine Grafik aufbauen, die 3 verschiedene Grafiken mit jeweils 3 Rollover-Stati vereint. Doch zunächst zu den einzelnen Rollover-Grafiken. Ich will auf meiner Website 3 Rollover mit jeweils verschiedenen Grafiken einbauen. Dazu lege ich drei Grafiken an, die jeweils die drei gewünschten Rollover-Stati enthalten (normal, mouseover und click):

Bild 1 hat eine Dateigröße von 8,16 KB

Bild 2 hat eine Dateigröße von 3,76 KB

Bild 3 hat eine Dateigröße von 6,18 KB, macht also insgesamt 18,1 KB.

Durch folgenden Code lässt sich nun aus jeder dieser Grafiken ein Rollover erstellen:

#meinRollover1 {
	display:block;
	width: 106px;
	height: 118px;
	background: #FFF url(rollover.gif) no-repeat left top;
}
#meinRollover1:hover {
	background: #FFF url(rollover.gif) no-repeat left center;
}
#meinRollover1:active {
	background: #FFF url(rollover.gif) no-repeat left bottom;
}

Dabei geben width und height natürlich die Dimensionen nur eines der Einzelbilder, die die verschiedenen Stati darstellen, an (Beispiel).

Nun kombiniere ich, wie in obiger Matrix, alle 9 Einzelbilder in einer einzigen Datei:

Dabei achte ich darauf, dass jedes Einzelbild auch entsprechend seiner CSS-Positionierung in der Datei platziert wird. Jedem Einzelbild wird also genau so viel Platz eingeräumt, wie das größte Einzelbild beansprucht. Ebenso platziere ich die Einzelbilder entsprechend der CSS-Matrix, das Einzelbild zum Beipspiel, das nach der CSS-Matrix sowohl vertikal als auch horizontal zentriert wird, muss also auch in der Datei ebenso zentriert werden. Dies lässt sich in Photoshop besonders leicht durch die Verwendung von Hilfslinien erreichen. Zur Verdeutlichung hier nochmal die kombinierte Grafik mit eingezeichneten Hilfslinien:

Mit folgendem Code erstelle ich nun 3 völlig voneinander unabhängige Rollover-Links, die alle nur diese einzige Datei verwenden:

a {
	display:block;
}
#meinRollover1 {
	width: 106px;
	height: 118px;
	background: #FFF url(rollover_combined.gif) no-repeat left top;
}
#meinRollover1:hover {
	background: #FFF url(rollover_combined.gif) no-repeat left center;
}
#meinRollover1:active {
	background: #FFF url(rollover_combined.gif) no-repeat left bottom;
}
#meinRollover2 {
	width: 44px;
	height: 79px;
	background: #FFF url(rollover_combined.gif) no-repeat center top;
}
#meinRollover2:hover {
	background: #FFF url(rollover_combined.gif) no-repeat center center;
}
#meinRollover2:active {
	background: #FFF url(rollover_combined.gif) no-repeat center bottom;
}
#meinRollover3 {
	width: 104px;
	height: 73px;
	background: #FFF url(rollover_combined.gif) no-repeat right top;
}
#meinRollover3:hover {
	background: #FFF url(rollover_combined.gif) no-repeat right center;
}
#meinRollover3:active {
	background: #FFF url(rollover_combined.gif) no-repeat right bottom;
}

Jedem einzelnen Rollover werden dabei die Dimensionen zugewiesen, die das tatsächliche Einzelbild beansprucht, die Positionierungwerte werden aus der CSS-Matrix übernommen.
Hier ein funktionierendes Beispiel der 3 Rollover.

Das Resultat: Die kombinierte Grafik belegt 14,6 KB, was gegenüber den Deteigrößen der drei einzelnen Grafiken (zusammen 18,1 KB) einer Reduzierung von 20% entspricht.