CSS Sprites: Mit jQuery alle Bilder (img) autom. ersetzen (background-image)
Ich habe mal versucht, eine Homepage in Richtung CSS-Sprites zu optimieren (NABU Heidelberg), genauer gesagt, lasse ich mit Hilfe von jQuery alle Vordergrund-Bilder (img) auf der aktuell zu ladenden Seite, die ein bestimmtes Kriterium erfüllen, automatisch durch CSS-Sprites, also durch Hintergrundbilder zu ersetzen. Bei (Maus-)Hover oder beim Durch-Tabben (Fokuswechsel) werden die Bilder später entsprechend gewechselt, zum Beispiel durch eine "hellere" Bild-Version.
Falls Interesse der genau(er)en Lösung besteht, kann ich das gerne weiter ausführen (.js und .css-Code, Tutorial bzw. das ins Contao Wiki auslagern oder so...). Hier schon einmal einige Details zu Randbedingungen/Umsetzung/Implementierung:
- Es spielt keine Rolle, in welchem Kontext das zu ersetzende Bild auftaucht (also ob als/im Inhaltselement, Modul, Nachricht, Event, Gallery usw....). Es kann also wie gewohnt ("redaktionell") im Backend irgendwo ausgewählt und eingefügt werden.
- Alle diese Bilddateien müssen bereits sowohl den/einen normalen (oben bzw. center top) als auch den :hover bzw. :focus-Zustand (unten bzw. center bottom) beinhalten, sind also bereits die gewünschten Sprites-Bilddateien (also doppelte Höhe).
- Alle Vordergrundbilder, die automatisch durch Sprites ersetzt werden sollen, unterliegen der Konvention, dass sie mit -sprite vor dem letzten Punkt im Dateinamen enden müssen (also etwa ...-sprite.jpg bzw. ...-sprite.png usw...).
- Bei $(document).ready verpasse ich (mit Hilfe von jQuery) allen diesen Tags bzw. DOM-Knoten die Klasse '...-sprite' (addClass). Die Bilder werden zunächst versteckt.
- Später, erst bei $(window).load werden (per jQuery) alle Tags mit Klasse '...-sprite' mit dem entsprechenden Hintergrundbild (background-image) ersetzt (replaceWith). Bei ready wäre es zu früh, wie Tests per UTMS-Internet-Zugang oder mit mobilen Endgeräten gezeigt haben.
Sowohl bei :hover als auch bei :focus werden die Bilder gehighlightet bzw. das Hintergrundbild entsprechend verschoben. Das mit dem Fokus geht auch im IE(7/8), da ich die <img>- bzw. <a><img>-Tags durch <a>-Tags und nicht etwa durch <div>-Tags ersetze.
vg refalo