CSS Image Sprites

Indholdsfortegnelse

    Vis indholdsfortegnelse

Billede Sprites

En billedsprite er en samling af billeder sat i et enkelt billede.

En webside med mange billeder kan tage lang tid at indlæse og generere flere serverforespørgsler.

Brug af image sprites vil reducere antallet af serverforespørgsler og gemme båndbredde.

Image Sprites - Simpelt eksempel

I stedet for at bruge tre separate billeder, bruger vi dette enkelte billede ("img_navsprites.gif"):

Med CSS kan vi vise netop den del af billedet, vi har brug for.

I det følgende eksempel specificerer CSS, hvilken del af "img_navsprites.gif" billede at vise:

Eksempel

#home
{
   
width: 46px;
  height: 44px;
   
background: url(img_navsprites.gif) 0 0;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Forklaret eksempel:

<img id="home" src="img_trans.gif">

- Definerer kun et lille gennemsigtigt billede, fordi src-attributten ikke kan være tom. Det viste billede vil være det baggrundsbillede, vi angiver i CSS

width: 46px; height: 44px;

- Definerer den del af billedet, vi vil bruge

background: url(img_navsprites.gif) 0 0;

- Definerer baggrundsbilledet og dets position (venstre 0px, top 0px)

Dette er den nemmeste måde at bruge billedsprites på, nu vil vi udvide det ved at bruge links og hover-effekter.

Image Sprites - Opret en navigationsliste

Vi ønsker at bruge sprite-billedet ("img_navsprites.gif") til at oprette en navigationsliste.

Vi vil bruge en HTML-liste, fordi den kan være et link og også understøtter et baggrundsbillede:

Eksempel

#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;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Forklaret eksempel:

#navlist {position:relative;}

- position er sat til relativ for at tillade absolut positionering inde i den

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

- margen og polstring er sat til 0, listestil fjernes, og alle listeelementer er absolut positioneret

#navlist li, #navlist a {height:44px;display:block;}

- højden af alle billeder er 44px

Begynd nu at placere og style for hver specifik del:

#home {left:0px;width:46px;}

- Placeret helt til venstre, og billedets bredde er 46px

#home {background:url(img_navsprites.gif) 0 0;}

- Definerer baggrundsbilledet og dets position (venstre 0px, top 0px)

#prev {left:63px;width:43px;}

- Placeret 63px til højre (#hjembredde 46px + lidt ekstra mellemrum mellem elementer), og bredden er 43px

#prev {background:url('img_navsprites.gif') -47px 0;}

- Definerer baggrundsbilledet 47px til højre (#home width 46px + 1px linje skillevæg)

#next {left:129px;width:43px;}

- Placeret 129px til højre (starten af #prev er 63px + #prev width 43px + ekstra mellemrum), og bredden er 43px

#next {background:url('img_navsprites.gif') -91px 0;}

- Definerer baggrundsbilledet 91px til højre (#home width 46px + 1px linjedeler + #prev width 43px + 1px linjedeler)

Image Sprites - Svæveeffekt

Nu vil vi tilføje en svæveeffekt til vores navigationsliste.

Tip: :hover-vælgeren kan bruges på alle elementer, ikke kun på links.

Vores nye billede ("img_navsprites_hover.gif") indeholder tre navigationsbilleder og tre billeder til brug for svæveeffekter:

Fordi dette er et enkelt billede og ikke seks separate filer, vil der være nr indlæsningsforsinkelse, når en bruger holder markøren over billedet.

Vi tilføjer kun tre linjer kode for at tilføje svæveeffekten:

Eksempel

#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;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Eksempel forklaret:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- For alle tre svævebilleder angiver vi den samme baggrundsposition, kun 45px længere nede