Webwork
/
Sprites

Sprites

A Web page that uses a lot of images, such as navigation buttons, can be made more responsive if the individual images are placed into a single larger image and partially displayed using CSS positioning. This technique only requires a single server call to download multiple "images" and saves time, bandwidth and makes pages appear much faster.

Simple sprite example:

Start with an image that has two "states":

simple-sprite

Then add the CSS to display the default state and the hover state:

Source:
<style type="text/css" media="screen">

#simple-sprite {
background:url(images/simple-sprite.jpg);
width:200px;
height:100px;
cursor:pointer;
}

#simple-sprite:hover {
background:url(images/simple-sprite.jpg);
width:200px;
height:100px;
background-position:0 -100px;
}

</style>

<div onclick="top.location.href=
'http://www.re-vision.com';" id="simple-sprite"></div>
Web page:

A more complex example:

Start with an image that has multiple components and "states":

sprite-buttons

Then add the CSS to display the default component and its hover state:

Source:
<style type="text/css" media="screen">

#button-sprite-next {
background:url(images/sprite-buttons.jpg);
float: left;
width:105px;
height:35px;
background-position:0 -10px;
cursor:pointer;
}

#button-sprite-next:hover {
background:url(images/sprite-buttons.jpg);
width:105px;
height:35px;
background-position:0 -46px;
}

#button-sprite-prev {
background:url(images/sprite-buttons.jpg);
float: left;
width:100px;
height:35px;
background-position: -105px -10px;
cursor:pointer;
}

#button-sprite-prev:hover {
background:url(images/sprite-buttons.jpg);
width:100px;
height:35px;
background-position: -105px -46px;
}

</style>

<div id="button-sprite-next" onclick="top.location.href=
'http://www.re-vision.com'; "></div>
<div id="button-sprite-prev" onclick="top.location.href=
'http://www.re-vision.com'; "></div>
Web page:

CSS sprites are how almost all modern Web sites are built:

amazon_sprites

youtube_sprites

css3_sprites

CSS-Sprites

Previous | Webwork Table of Contents | Next >