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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma