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

Question

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 image, 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

Answer 1

# 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/

Answer 2

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

Answer 3

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/