Sprites zijn hele nuttige dingen voor een website-bouwer. Zij zorgen er voor dat de HTTP requests tot een minimum beperkt blijven en dat er niet te veel object overhead is. Ook de bandbreedte wordt hier mee gespaard. Kortom: Er zijn alleen maar voordelen en geen nadelen. Ik ga geen lange verhandeling over sprites geven. Als je wat wilt weten over "het hoe en wat" voor wat betreft de sprites, kan je het beste eens flink googelen op de trefwoorden "sprites", "inline" en "hover" (om te beginnen). Theorie is altijd nuttig, maar de ervaring heeft geleerd dat voorbeelden (die gewoon werken natuurlijk...) vele malen beter zijn dan het opsommen van droge theorie, door onze (het goed-bedoelende) web-guru's; die, af en toe, niet echt weten waar ze het over hebben, en de arme website-bouwers opzadelen met gezwollen taal waarom iets volgens hun niet kan werken, terwijl er geen enkel positief advies wordt gegeven. Ik denk dat jullie dit wel herkennen? Nietwaar? Zo.. de laatste tekst was niet echt noodzakelijk, maar ik moet de pagina wat vullen omdat er eigenlijk geen fluit over deze sprite-procedure te vertellen valt.
Klik eerst even op dit plaatje om de basis van alle sprites te zien.
Als voorbeeld heb ik
een transparant plaatje gemaakt van 300px bij 375px, en heb daarin 20
afbeeldingen geplaatst. Ze staan niet helemaal "jofel" uitgelijnd, maar ik weet
zeker dat jij dit klusje prima zelf kan opknappen (met plaatjes die jij op jouw
website gaat gebruiken). Het enige wat je nu nog nodig hebt is wat CSS om
de "deel-plaatjes" op de juiste plekken in de pagina te zetten. De
css-code zit achter
deze link. In de span van de link kan je links of rechts aangeven. Duidelijk dat de
sprite ,oftewel links, danwel rechts, uitgelijnd zal worden.
Als je een menu of iets soortgelijks wilt maken, gebruik je de "links"-css
zonder dat je tekst tussen de sprites plaatst. Dan staat alles netjes
horizontaal uitgelijnd. De "hover-code" is exact gelijk aan de "normal-code".
Ik heb alleen willekeurig de getalletjes van de positie door elkaar gehaald
(bij de hover-code) om verschil in de normal- en hover-state aan te geven.
Ik zei al dat er nauwelijk iets te vertellen valt over de inline-sprites. Daarom
heb ik om de pagina nog wat te vullen een netscape-sprite met de "rechts-span"
toegevoegd in deze alinea. Vergeet niet om de voorbeeld-sprite even te kopieren
voordat je gaat experimenteren met de CSS-code (anders zie je niet zo veel..).
En zoals ik wel vaker zeg: Kijk even in de broncode van deze pagina hoe het 1 en
ander in elkaar zit.
update:
De code van de voorbeelden wordt, zo mogelijk, altijd verbeterd
en aangepast. Op deze sprite pagina is dit ook gebeurd... De procedure werkt
nu (nog beter) met minder code en is nauwelijk meer aan te merken als een "inline-item".
Alleen een span regelt nu de sprite. Maar omwille van de zoekmachines wordt
de omschrijving, en de titel, van de pagina niet aangepast.
De titel van deze pagina is: 'css sprites inline plaatjes'.
De sleutelwoorden zijn : css, inline, sprites en images.
De omschrijving is: 'CSS sprites, bulletproof inline plaatjes met hover'.