Loading lesson path
Concept visual
Overview
An image sprite is a collection of various small images put into one larger image file, called a "sprite image".
Formula
A sprite image is typically arranged in a grid - like way, like this:A web page with multiple images takes a longer time to load, and generates multiple server requests. So, instead of downloading each image separately, the browser downloads the single sprite image file, which will reduce the number of server requests and reduce bandwidth usage.
The CSS key properties used for image sprites are:
Formula
background - image background - positionHere, the CSS code specifies which part of the sprite image ("img_navsprites.gif") to show for the different navigation items (home, next, and previous):
<html> <head> <style>
#home {
width: 46px;
height: 44px;
background-image: url(img_navsprites.gif);
background-position: 0 0; /* Top-left corner of the sprite */
}
#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');Formula
background - position:-47px 0; /* 47px to the left of the sprite's top-left */
}#next
{
width: 43px;
height: 44px;Formula
background - image:url('img_navsprites.gif');
background-position: -91px 0; /* 91px to the left of the sprite's top-left */
}</style> </head> <body> <img id="home" src="img_trans.gif" width="1" height="1"> <img id="prev" src="img_trans.gif" width="1" height="1"> <img id="next" src="img_trans.gif" width="1" height="1"> </body> </html>
width, height
- Defines the width and height of each image-parts background-image: url(img_navsprites.gif);Formula
- Defines the url of the image sprite background - positionHere, we use the sprite image ("img_navsprites.gif") inside a navigation list.
Formula
We will use an HTML list (< ul > and < li >) for the navigation list:#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: 60px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 120px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}#navlist {position:relative;}Formula
- set margin and padding to 0, remove bullets, and all < li > are absolute positioned#navlist li, #navlist a - set the height of all images to 44px and display as block Now position and style each navigation item:
#home {left:0px;width:46px;}#home {background:url(img_navsprites.gif) 0 0;}Defines the background image and its position (left 0px, top 0px)
#prev {left:60px;}
- Positioned 60px to the right (#home widthFormula
46px + some extra space between items)#prev {background:url('img_navsprites.gif') -47px 0;}Formula
- Defines the background image 47px to the right (#home width 46px + 1px line divider)#next {left:120px;}Formula
- Positioned 120px to the right (start of #prev is 60px + #prev width 43px + extra space)#next {background:url('img_navsprites.gif') -91px 0;}Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider)
Formula
Image Sprites - Hover EffectNow we want to add a hover effect to our navigation list. 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. 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 {Formula
background: url('img_navsprites_hover.gif') - 47px-45px;
}
#next a:hover {Formula
background: url('img_navsprites_hover.gif') - 91px-45px;
}#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}