CSS Rollovers with Sprites

Description

Rollovers are one of the most popular navigation features. The easy way to do it involves changing the background image in the :hover pseudoclass, but, go figure, Internet Explorer has a flickering problem with that.

When you are done with this tutorial, you are welcome to try to add this feature to your journal. It is not required, but it will help you get a professional look.

The steps below when working with the CSS code should feel a lot like those two demos we did the week before I left, except I can't be there to guide you at the projector. You will have to read the instructions very carefully!

Day 1

Getting the tutorial files

  1. The tutorial files are stored in a "sprite_rollover" folder that is in the shared folder on the network. Copy it into your "web" folder on your I: drive.
  2. Add your login name to the folder so that its new name is "yourlogin_sprite_rollover"

Understanding the link between the XHTML and the CSS

  1. Open the index page in a Web browser. It is currently very boring. We will fix that soon!
  2. Open the index page and the CSS file in Notepad.
  3. Notice the <link> tag in the XHTML contains the filename of the CSS.
  4. Notice that the <a> tags have a class attribute with the value "nav" so that the class selector ".nav" in the CSS will apply to those specific links. That way, if you wanted all the other links on your page styled in a different way, you could use a different selector.
  5. Close the index page code. You should not need it again. Everything from here out will be done with a single image and CSS code.
  6. Open the index page in a Web browser to view it.
  7. Keep it open so that you can refresh the view every time you make a change.

Uncommenting the CSS

  1. First notice the lines that are not commented out--such as lines 1 and 2. Line 1 is the selector that tells the browser which elements will receive the style. Line 2 gives those elements a background color. Setting the background color first will help you to see the "box."
  2. Definition: "uncomment" means to delete the comment symbols (both "/*" and "*/" that are around some chunk of code. This term will be important in the next few steps.
  3. Uncomment line 3. This line is a display setting that makes the selected elements have the properties of block elements.
  4. Save and view in a browser. Notice the primary characteristics of block elements are that they start on new lines and have widths that are 100% of the page.
  5. Let's clean up this look a little bit. Uncomment lines 5, 6, 7, and 8. They will give each link a margin, a new width, a new color, and remove the underline.
  6. Save and view in a browser.
  7. Now for some of the really important stuff--the background image! Uncomment lines 10, 11, and 12. These will specify the background image, instruct the browser not to repeat the image, and specify that the image should start showing 2 pixels away from both the top and left sides.
  8. Save and view in a browser. It should look a little weird.
  9. The image is cut off and it's hard to read the text. Uncomment line 14 to fix this problem by adding some padding. Notice that the padding is different for each side of the box.
  10. Save and view in a browser.
  11. It's looking pretty good now! But guess what! We are still not seeing all of the background image. Open the image file in Photoshop to view it.
  12. See how we are only seeing half of it in the Web page? This is the true power of sprites. We set things up with sizes that fit exactly, but the image is twice the size of the element.
  13. Go to Image, Resize Image... to look at the image size in pixels. It's essentially two 25-by-25 images one on top of the other in a single file.
  14. This way our browser only has to load one file to ge the rollover effect that you will see next.
  15. Back in the CSS, uncomment lines 18, 19, 20, and 21. You should understand the first three just fine. It's the last one that might be a little strange.
  16. It uses a negative background position in order to raise the image upward. Positive positions are measured down from the top left corner, so negative positions are measured up or left.
  17. That's it. There's a lot of code in there just to get things looking nice, but the truly important ones are lines 10-14 and 21. They do the most important job for this rollover effect.

Day 2

Trying Different Values

  1. You can try any different values you want in the various CSS properties, although you may want to leave a comment to the side with a note about the original value.
  2. Here are some specific values to try (you can do and undo them each any time you choose):
  3. I've noticed you all like to change the various colors on any page. Go ahead and spend a couple of minutes on that.
  4. Try changing the margin (line 5) and padding (line 14) values to adjust the spacing of the links.
  5. Try commenting out line 11 so that the background image repeats.
  6. Try different background-position values (lines 12 and 21) to see different parts of the image both in regular style and hover.
  7. Here's a fun one: Comment out the width declaration (line 6) and include a new declaration "float: left;" instead.

Designing Your Own Sprite

  1. Use Photoshop to design your own sprite image file. It should include both the regular image and the one you want to see on the hover.
  2. (Hint: You may want to make two separate images so that you know exactly how big both of them are, and then combine them into one file.)
  3. Save your new sprite image in you "yourlogin_sprite_rollover" folder, and name the file "custom.png" (I like PNG--but you can pick your preferred image type).

Replacing the Current Sprite

  1. In the CSS, the background we are using is "button.png" and it is sourced on line 10. Replace this filename with "custom.png" or whatever your new sprite's name is.
  2. Adjust the padding (and add a height property if you think it's necessary) so that the sprite rollover effect works ok.

Finishing the Styles

  1. Adjust the styles to make the navigation list look great with you new sprite rollover.
  2. When you are sure you are completely finished, submit your entire "yourlogin_sprite_rollover" folder to the shared folder.