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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma