Semantic portal
CSS Image Sprites: Image Sprites - Hover Effect
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.