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":
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>
#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":
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>
#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:
