CSS Sprite Generator

Ein echt nettes Tool

Ich nutze auf meinen Seite zur Kennzeichnung von externen Links 3 verschiedene Grafiken, eine die standardmäßig angezeigt wird, eine für den hover- / fokus-Effekt und eine für den visited-Effekt.

Die Links werden wie folgt formatiert:

padding-right: 17px;
background-image: url(\'../../images/link_extern.gif\');
background-repeat: no-repeat;
background-position: right;

Für die hover/fokus/visited-Links werden die Hintergrundbilder entsprechend geändert. Das funktioniert soweit auch super, allerdings kostet mich das 3 Requests.

Sieht jemand eine Möglichkeit, diese 3 Bilder zusammenzufügen und passend zu positionieren? Eine Mischung aus einer Höhenangabe und right funktioniert leider nicht bei FF und Opera.

UFOMelkor schrieb:

Sieht jemand eine Möglichkeit, diese 3 Bilder zusammenzufügen und passend zu positionieren? Eine Mischung aus einer Höhenangabe und right funktioniert leider nicht bei FF und Opera.

Ich würde es so wie im Besipiel-Sprite von Matthias machen.
Dass es hier Probleme mit der Position geben kann, ist mir auch schon aufgefallen. Versuch mal die beiden Angaben zu tauschen, also "background-position: -20px right" => "background-position: right -20px" oder umgekehrt.

Edit: Ach ja, das Minus-Zeichen nicht vergessen: right -20px ...

Habs mal mit Firebug durchprobiert, scheint so nicht zu funktionieren.

Ich habe es auch schon mal probiert, leider ohne Erfolg.

Vielleicht kommst Du mit diesen Links weiter:

www.photoshop-weblog.de/test/

phpperformance.de/css-sprites-einsparung-an-http-requests-durch-kombination-von-hintergrund-bildern/

RobbyMe schrieb:

Vielleicht kommst Du mit diesen Links weiter:

Und hier noch ein Link: www.alistapart.com/articles/sprites/ der mich etwas weiter gebracht hat.

Ich glaube, ich habe die Lösung gefunden
Wären es mehr als drei Zustände, die man verwalten müsste, wäre es wohl nicht möglich, so ist es zum Glück relativ simpel.

Bei dem folgenden Beispielcode gehe ich davon aus, dass oben das Standard-Bild, in der Mitte das hover-/focus-Bild und unten das visited-Bild ist.

Standard:

padding-right: 17px;
background-image: url(\'../../images/link_extern_sprite.gif\');
background-repeat: no-repeat;
background-position: right top;

Focus / Hover:

background-position: right center;

Visited:

background-position: right bottom;

Es sieht nicht 100% so aus wie vorher, dafür müsste man die Bilder wohl noch ein klein wenig korrigieren (das Hover-/Focus-Bild springt ein wenig), aber das merkt man nicht wirklich.

Mir gefällt die Lösung - wieder 2 Requests gespart und ein grüner Pluspunkt mehr beim Traffic-Scanner

Hi,

versuche mich grade mit CSS-Sprite die Requests für meine Websites zu reduzieren. Nun ist mir aufgefallen, dass meine 4 Bilder einzeln (also noch nicht zusammengeführt zu einem Bild/Sprite) zusammengerechnet ca. 27kb Speicher benötigen, aber als Sprite (Bilder sind nun zusammengeführt) ca. 100kb Platz benötigt. Jetzt meine Frage: Muss ich irgendwelche Einstellungen bei dem von Matthias genannten Sprite-Generator beachten oder ist das normal, dass die Sprite-Datei so groß ist? Da stellt sich mir dann die Frage, ob sich das im Endeffekt lohnt, wenn ich die Requests senke, aber den Traffic doch gleichzeitig erhöhe?!

Gruß Stephan

P.S. Ich werde mal versuchen, die Dateien händisch zusammenzusetzen...

Eigentliche sollte dem nicht so sein. Wie groß sind denn die Abstände der Bilder bzw. was für Abmessungen haben die Bilder?

Es könnte auch an Deinem Bildformat liegen. Wenn Du statt jpg jetzt png verwendest hast Du natürlich deutlich mehr.

Gruß Robert

gambler schrieb:

... Nun ist mir aufgefallen, dass meine 4 Bilder einzeln (also noch nicht zusammengeführt zu einem Bild/Sprite) zusammengerechnet ca. 27kb Speicher benötigen, aber als Sprite (Bilder sind nun zusammengeführt) ca. 100kb Platz benötigt.

So sollte es nicht sein. Ich habe die Sprites mit

spritegen.website-performance.org