Using Sprites in HTML and CSS AWAR4S May 2012

1) Create a Sprite Image A sprite is a specially formatted image which can show variants of various sub-images which are inside of it. They are frequently used in video and computer games, especially older ones. Sprites can be either animated or non-animated. Here is an example of a sprite from the w3schools tutorial:

Using Fireworks Your first step in this assignment will be to use a graphics program such as Fireworks to create a sprite. The example on the last slide, will lead to a more complicated sprite in the w3 tutorial:

In Fireworks… In Fireworks (or another graphics program which can produce bitmap images), you will design a sprite which has AT LEAST FOUR cells. The sprite below has three cells:, and the more complicated one has six cells:

Creating Your Sprite Your sprite must have at least four cells. These should be two images on top, with two variants below. If you wish, you may try to do four separate cells all in the same row, but this may be more complicated. NOTE: You will have to know where individual cells start and stop in terms of pixel count! Use different graphics programs if they help to format and count the pixels in your image. NOTE:.gif,.png, and other bitmap formats should all work. The w3schools examples all use.gifs.

Code From W3Schools Page

2) Format the Top Row Follow the instructions on the w3schools tutorial page under the heading ‘Create a Navigation List’: me=trycss_sprites_nav Note that at this point, hover effects have not yet been added!

3) Hover Effects If your sprite has two rows of variants, the next step will be to format the hovering effects which allow the second row to be displayed. The example from the w3schools page is at: =trycss_sprites_hover_nav =trycss_sprites_hover_nav NOTE: Your sprite will have different spacing from the example image which was used! NOTE: Borders between individual cells should all be exactly ONE pixel in width, as this makes finding cell dimensions incredibly easy.