Sprites

Jobs from Indeed
Published:
By:

In computer graphics sprites are small images that are used to animate or display certain components of a larger scene. In web development the scene is of course the web page and the sprites are often used to add animated effects to web components like menu items, buttons and controls.

These small images are all combined into a single large image and each element in the web page then displays only the portion of the image that contains the desired sprite.
 

Looking Through The Window

One way of visualizing the technique that is used is to consider a window in a room. When you look out the window you see the neighborhood but the window limits how much you can see. There is a great deal more to the view but only the portion that is positioned in front of the window can be seen.


Now imagine that instead of the burbs outside there is a giant web page button that can be seen through the window. Yes, ridiculous but just imagine this giant button is a graphical play button that fills the entire window.


Now you might assume looking out the window that the button is made up of a single image and you can view all that there is to see but in reality you are viewing a sprite that is an element in a two sprite image for this play button.


It turns out that the image behind the window is two times wider than the window itself and what you cannot see is that the second half of the image is another sprite that shows what the buttons should look like when the play button is pressed. When the button is pressed the entire image shifts the width of the window and the playing version of the button is shown.


We still only see one button but the appearance changes after clicking the button because the image holding the sprites is shifted. If we put on our x-ray glasses so we can see through the wall then we can see that there are in fact two sprites and it is only the size of the window that shows us only one of the available sprites for the button.


Now that we can see through the walls it becomes apparent that both sprites are there in the same image and the only reason we do not see the blue sprite any longer is because the image has shifted in the window. So by shifting the button image back and forth in the window we can change the appearance of the button using sprites inside a single image.

Looking Through a DIV Tag

To apply this to a web page let us assume that the size of the button sprites in the image are 62 pixels by 57 pixels. This means the total size of the image containing the sprites is 124 pixels wide, 2 sprites times 62 pixels, and 57 pixels tall.

To use these sprites we create a DIV tag pair and use the sprite image as the background for the tag. We set the size of the DIV tag pair to the exact size of a single sprite in the image so that only one sprite can be viewed through the DIV tag.

 
<div style="border:1px solid red; position:relative; width:62px; height:57px; background:url('sprites.png');">
</div>


 At this point the button will not do anything but display the idle button condition because the size of the DIV tag limits the view of the background image to the first sprite in the image. If we could get an x-ray glimpse of the entire background image for this DIV tag we would see the green active sprite for the button is hidden to the right of the DIV tag border.


To make the button appearance change we need to use a Javascript event. We will change the position of the background image when the onclick event for the DIV tag is triggered.

 

<div style="position: relative; width: 62px; height: 57px; background-image: url('sprites.png'); background-position: initial initial; background-repeat: initial initial;" onclick="this.style.backgroundPosition = '-62px 0px'">
</div>

 

When the onclick event is triggered for the DIV tag the background position is shifted to the left -62 pixels, the full width of a sprite image and the DIV tag, thus making the active sprite come into view and shifting the idle sprite to the left out of view.


Additional Javascript coding is needed to turn this into a fully operational button but at this point you can see how a series of two sprites inside a single image can be used to change the status appearance of a single button by changing the background position in the tag's style settings. This technique is not limited to two sprites and two states, it can be expanded to handle multiple sprites, multiple states, and even multiple page elements all from a single image.