Sie sind hier: Home

Icons und Sprites

Mit recht simplen HTML- und Stylesheet-Angaben lassen sich Social-Bookmark-Dienste einfach und schnell in eine Website einbauen. Dabei macht man sich gleichermaßen die Vorteile von Sprites und Inline-Bildern zunutze und sichert damit eine performante Auslieferung der Seitenelemente.

Das Einbinden der Icons ist mit recht einfachen Mitteln schnell umgesetzt. Dabei benötigt man nicht viel mehr als ein paar Stylesheet-Angaben und ein wenig HTML um die Social-Bookmark-Icons performant in die eigene Internetseite einzubauen. Im auf diesen Absatz folgenden Code-Abschnitt soll demonstriert werden, wie sich die in einer Sprite-Graphik enthaltenen Icons darstellen lassen.

Im von allen Browseranwendungen zu verwendenden Stylesheet zu Beginn des Listings wird festgelegt, dass alle Elemente mit dem Class-Attribut „sb” eine GIF-kodierte Hintergrundgraphik nutzen sollen. Dabei steht <Bilddaten> für den Base64-Code des Sprites, welches die Social-Bookmark-Icons enthält. Darüber hinaus sollen diese Elemente genau 18x18 Pixel groß sein.

Die darauf folgenden Styles legen für jeden Social-Bookmark-Dienst fest, ab welcher Position des Sprites die Darstellung des Icons erfolgen soll. Mit top wird festgelegt, dass die Hintergrundgraphik an der oberen Seite der Graphik ausgerichtet wird. Left – alternativ kann auch der Wert 0 angegeben werden – bzw. die negativen Pixelangaben legen quasi den Offset fest, um den das Sprite im Hintergrund verschoben werden muss – das Yahoo!-Icon beispielsweise steht als drittes Icon im Sprite und deshalb verschiebt sich der Hintergrund eben zweimal um die Breite eines Icons (2x18 also 36 Pixel).

Auf den allgemeinen Style folgt ein Conditional-Comment, dessen Inhalt nur durch Internet Explorer beachtet wird, die älter sind als Version 8. Anders als dieser beherrschen ältere Versionen des Browsers keine eingebetteten Bilder und müssen die Sprite-Graphik deshalb aus einer externen Datei nachladen. Die restlichen Style-Angaben bleiben aber auch für ältere IEs gültig.

Nach den Stylesheets folgt der HTML-Code für normale Links, die ein transparentes Bild enthalten und mit Hilfe des Class-Attributes einen entsprechdenden Hintergrund zugewiesen bekommen. Hier müssen nur noch die HREF-Attribute mit den entsprechenden Links zu den Anbietern ergänzt werden und fertig sind die Social-Bookmarks. Das Ergebnis soll im folgenden Block dargestellt werden:

Damit auch der technisch weniger begabte Seitenbetreiber leicht in den Genuß der durch Bookmark-Dienste gestellten Funktionen gelangt, bieten einige Anbieter bereits seit längerem fertige Scripte an, mit denen sich die entsprechenden Links samt dazugehörigen Icons recht schnell in eine Website integrieren lassen. Dabei werden JavaScript-Dateien eingebunden, die mittels DOM den zur Darstellung und Verlinkung benötigten HTML-Code dynamisch erzeugen. Diese Script-Dateien liegen im Allgemeinen auf den Domains dieser Anbieter und auch die Icons sind auf deren Servern abgelegt.

Zwar legen einige Anbieter die Icon-Graphiken auf einer vom Script getrennten Subdomain ab, allerdings leider nicht verteilt auf mehrere unterschiedliche (Sub-)Domains. Im Hinblick auf die gegebenen Browserbeschränkungen bezüglich der Anzahl gleichzeitiger Verbindungen zu einer Domain bzw. Subdomain wäre eine solche Aufteilung allerdings wünschenswert.

Leider nutzen diese fertigen Scripte normalerweise weder Sprites noch eingebettete Bilder und auch die Möglichkeit die Bilddaten direkt im JavaScript-Code einzubetten scheint nach meinem Kenntnisstand noch niemand in Betracht gezogen zu haben. Aufgrund der Tatsache, dass der Betreiber einer Internetseite stets an einer performanten Auslieferung seiner Seite interessiert sein dürfte, ist es angebracht einen Anbieter zu wählen, der sowohl Scripte als auch Bilder zügig ausliefern kann – im Zweifelsfall sollte man sich einfach mal hin setzen und es selbst realisieren.

Seite 3 von 3 | « [1] • [2] • [3] »