How to use Sprite instead of img src

Question

I am trying to use sprite images I have a very basic link

<td align="center">
    <img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>

I am struggling for a while, tying to change this and making it use an image in my sprite instead of the src

Answer 1

Here's an simple example of using sprite images.

The basic idea is to use background image on a fixed sized element (in the example it's an a tag with width/height 20px). Then positioning the image using background-position to select the sprite you need. The :hover selector is used to pick yet another sprite when moused over. Normally you'd have multiple links all using a different sprite from the one image.

css:

a.sprite_button
{
    background-image:url(toolbar.png);
    width:20px;
    height:20px;
    display:inline-block;
}
a#button1         { background-position:0px 0px; }
a#button1:hover   { background-position:0px 20px; }

html:

<a href="blah" class="sprite_button" id="button1"></a>

Answer 2

sprites are large images containing more than one graphic, which are used in CSS as background-image. They are placed as background on block elements which are also sized with CSS using Width and Height. Then, using background-position, the background image is placed where it should be. The image is cropped according to those coordinates and element size, and the rest is ignored (used for other element backgrounds).

For example you have pretty buttons, which have a normal state, a mouse hover state, and an active state (pressed). Just place all 3 images one below the other, in one single image file.

button  {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}

This will also eliminate the situation when new background image has to be loaded when the state is changed, meanwhile leaving an ugly button for half a second.