Here is the complete code. Copy and paste in a notepad and save it as abc.html. Save the two images below in the same folder as:
image.gif for big one and trans.gif for small one.
<html>
<head>
<title>Image Sprites</title>
<style type="text/css">
img.sprite
{
width:46px;
height:44px;
background:url(image.gif) 0px 0px;
}
.sprite:hover
{
background: url(image.gif) 0px 44px;
}
</style>
</head>
<body>
<img class="sprite" src="trans.gif" />
</body>
</html>
- image.gif on imgur
- trans.gif on imgur (1x1 pixels)
In simple words, CSS sprites use only one image instead of many.
So instead of many image requests from server only a single request is sent.
