Learning Report No. 07: Image Sprites
sources
w3schoolsWhat I learned
An image sprite is a collection of images put into a single image; only a portion of the image is viewed at a time. When one portion of the image is shifted to reveal the other it gives the roll-over affect without excessive requests to the server.
How I implemented it
When mocking up this site I wanted to have a texture appear under the navigation bar links as the user rolls over each link.
First I had to create the sprite images, I used photoshop. I created the swatch that I wanted, and then doubled the canvas height. 
Then I tried to implement the sprite on my navigation bar, but decided it would be easier if I tested how it worked on a separate HTML document with only the sprite CSS to make sure that I knew how it worked.
Then I tried to implement image sprites on my navigation bar on a test page. I am still having trouble adjusting the measurements to that the highlights land directly under the text.
Now the tricky part is combining the CSS so that it will work on my site. And as you can see at the top of this screen, I was able to accomplish it.
