Semantic portal
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.