CSS Image Sprites

CSS Image Sprites

//we want to use the sprite image ("img_navsprites.gif") to create a navigation list;
//we will use an HTML list, because it can be a link and also supports a background image

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Image Sprites - Hover Effect

//we only add three lines of code to add the hover effect

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Our new image ("img_navsprites_hover.gif") contains three navigation images and three images to use for hover effects.

Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.

CSS Image Sprites — Structure map

Clickable & Draggable!

CSS Image Sprites — Related pages: