CSS IMAGE SPRITES
- 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.
SYNTAX
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
SYNTAX EXPLAINATION
<img id="home" src="img_trans.gif">- Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSSwidth: 46px; height: 44px;- Defines the portion of the image we want to usebackground: url(img_navsprites.gif) 0 0;- Defines the background image and its position (left 0px, top 0px)
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}
#prev
{
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
}
#next
{
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}
#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;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
OUTPUT
