Sprites

Bij een site met veel plaatjes kan je die plaatjes beter in één bestand zetten. Dat deed ik bij aardeboerconsument.nl, waar de voorpagina veel plaatjes bevat. Deze staan nu allemaal in een bestand: http://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg
In de widgets staan divs; in de css roep je ieder plaatje apart aan met een background-image

  <div id="achtmythen"></div><div id="achtmythen"></div>#header{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:-10px -10px}  #jaarplaatje{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:-450px -140px;display:block;width:180px;height:176px}  #cartoon{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:-9px -137px;display:block;width:205px;height:149px}  /*#goodfoodmarch{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:-10px -299px;display:block;width:205px;height:35px}*/  #conferentie{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);  background-position:-237px -355px;display:block;width:205px;height:83px;padding:0}  #achtmythen{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:-9px -410px;display:block;width:205px;height:252px;}  #asn{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:45px -370px;display:block;width:205px;height:21px}  .menucenter{padding-left:70px!important;font-weight:700}  #abcmanifest{background-image:url(https://aardeboerconsument.nl/wp/wp-content/uploads/images/abcplaatjesSprite.jpg);background-position:-237px -150px;display:block;width:205px;height:205px;padding:0}  /*diashow */    

NB: Met het eerste getal bepaal je de afstand tot de linkerkant; met het 2e getal de afstand tot de bovenkant. Begin bij 0 (linksboven) en gebruik daarna negatieve getallen voor aanduiding naar rechts en naar beneden.

Je kan ook een hyperlink plaatsen op zo’n afbeelding.

NB: gebruik liever geen sprite voor een in beide richtingen repeterende achtergrond. zie http://stackoverflow.com/questions/3356357/css-sprites-repeating-images

Je roept de div aan in een widget, al of niet met een hyperlink op het plaatje.

  <div id="achtmythen"></div>