How to make a single image, treated as three different images?

I was just going through a website code, and I saw an image for Social Networks link

When I see the website, I only see the top row of the images. It means the darker top three images.

The issue is when my mouse hovers over the facebook imag开发者_如何学Pythone, only facebook image becomes the light facebook image, and same happens for the other two links as well.

The code they have used is given below

<ul class="social-icons"> 
<li class="facebook"> 
    <a title="Facebook" href="http://facebook.com/eclyptix">Facebook</a> 
</li> 
<li class="twitter"> 
    <a title="Twitter" href="http://twitter.com/eclyptix">Twitter</a> 
</li> 
<li class="linkedin"> 
    <a title="LinkedIn" href="http://linkedin.com/company/eclyptix">LinkedIn</a> 
</li> 

How is this done.

Your help is appreciated.

Thank you Zeeshan

---

@ Zeeshan; it's called sprite
check this article for more http://css-tricks.com/158-css-sprites/

check this example http://jsfiddle.net/sandeep/F4wpW/

---

This is CSS Sprite. Refer to article to make it happen.

---

You can set the background image position and crop it by setting width/height in the css file.

//HTML

<ul class="social-icons">
    <li class="facebook">
        <a title="Facebook" href="http://facebook.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li>
    <li class="twitter">
        <a title="Twitter" href="http://twitter.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li>
    <li class="linkedin">
        <a title="LinkedIn" href="http://linkedin.com/company/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li> </ul>

//CSS

.facebook{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px 0px no-repeat;
    width:30px;
    height:30px;
}
.facebook:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px -30px no-repeat;
}

.twitter{
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px 0px no-repeat;
    width:30px;
    height:30px;
}
.twitter:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px -30px no-repeat;
}

.linkedin{
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px 0px no-repeat;
    width:30px;
    height:30px;
}
.linkedin:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px -30px no-repeat;
}

Here is the working example http://jsfiddle.net/kayadiker/uuKzQ/