CSS- afbeeldingssprites
Afbeelding Sprites
Een afbeeldingssprite is een verzameling afbeeldingen die in een enkele afbeelding zijn geplaatst.
Een webpagina met veel afbeeldingen kan lang duren om te laden en genereert meerdere serververzoeken.
Het gebruik van afbeeldingssprites zal het aantal serververzoeken verminderen en bandbreedte besparen.
Afbeelding Sprites - Eenvoudig voorbeeld
In plaats van drie afzonderlijke afbeeldingen te gebruiken, gebruiken we deze enkele afbeelding ("img_navsprites.gif"):
Met CSS kunnen we precies dat deel van de afbeelding laten zien dat we nodig hebben.
In het volgende voorbeeld specificeert de CSS welk deel van de afbeelding "img_navsprites.gif" moet worden weergegeven:
Voorbeeld
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Voorbeeld uitgelegd:
<img id="home" src="img_trans.gif">- Definieert alleen een kleine transparante afbeelding omdat het src-attribuut niet leeg mag zijn. De weergegeven afbeelding is de achtergrondafbeelding die we specificeren in CSSwidth: 46px; height: 44px;- Definieert het deel van de afbeelding dat we willen gebruikenbackground: url(img_navsprites.gif) 0 0;- Definieert de achtergrondafbeelding en zijn positie (links 0px, boven 0px)
Dit is de gemakkelijkste manier om afbeeldingssprites te gebruiken, nu willen we het uitbreiden door links en zweefeffecten te gebruiken.
Afbeelding Sprites - Een navigatielijst maken
We willen de sprite-afbeelding ("img_navsprites.gif") gebruiken om een navigatielijst te maken.
We zullen een HTML-lijst gebruiken, omdat het een link kan zijn en ook een achtergrondafbeelding ondersteunt:
Voorbeeld
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
Voorbeeld uitgelegd:
- #navlist {position:relative;} - positie is ingesteld op relatief om absolute positionering daarbinnen mogelijk te maken
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - marge en opvulling zijn ingesteld op 0, lijststijl is verwijderd en alle lijstitems zijn absoluut gepositioneerd
- #navlist li, #navlist a {height:44px;display:block;} - de hoogte van alle afbeeldingen is 44px
Begin nu met het positioneren en stylen voor elk specifiek onderdeel:
- #home {left:0px;width:46px;} - Helemaal naar links gepositioneerd en de breedte van de afbeelding is 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Definieert de achtergrondafbeelding en zijn positie (links 0px, boven 0px)
- #prev {left:63px;width:43px;} - 63px naar rechts gepositioneerd (#home width 46px + wat extra ruimte tussen items), en de breedte is 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Definieert de achtergrondafbeelding 47px aan de rechterkant (#home width 46px + 1px lijnverdeler)
- #next {left:129px;width:43px;}- 129px naar rechts gepositioneerd (begin van #prev is 63px + #prev width 43px + extra spatie), en de breedte is 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Definieert de achtergrondafbeelding 91px naar rechts (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
Afbeelding Sprites - Zweefeffect
Nu willen we een hover-effect toevoegen aan onze navigatielijst.
Tip: De :hoverselector kan op alle elementen worden gebruikt, niet alleen op links.
Onze nieuwe afbeelding ("img_navsprites_hover.gif") bevat drie navigatieafbeeldingen en drie afbeeldingen om te gebruiken voor zweefeffecten:
Omdat dit één enkele afbeelding is en niet zes afzonderlijke bestanden, is er geen vertraging bij het laden wanneer een gebruiker de muisaanwijzer op de afbeelding plaatst.
We voegen slechts drie regels code toe om het hover-effect toe te voegen:
Voorbeeld
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
Voorbeeld uitgelegd:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Voor alle drie de hover-afbeeldingen specificeren we dezelfde achtergrondpositie, alleen 45px verder naar beneden