Implementing CSS sprites into your web site can greatly reduce the file size of your images and the number of calls a browser makes back to the web server where you site is hosted. For this assignment you will create your own CSS Sprite driven menu that adheres to the following criteria:

1. Make 3 of your own buttons and a hover state for each button. This means you will need a total of six button graphics. Remember that when you create sprites they should all be included in the same file, so you will have one file that includes six graphics. Don’t forget to optimize that file for the web!
2. The menu must be built on an HTML unordered list
3. Buttons must make use of two image states
4. The rollover effect must be driven by CSS

Use the tutorial files as references if you get stuck.

To submit your homework:

  • Visit your HTML page in a web browser and double-check that things are displaying the way you intend them to display
  • Load both your HTML file and image file to Assignment 07 in Blackboard.