Here is a screen capture of the new page:
And the old one:
(click for a larger view)It gave me a chance to use a new technique I had read about using "CSS Sprites". I have to thank A List Apart, a site full of amazing resources and how-to's which talked about this technique. Here is a link to their great Tutorial on CSS Sprites.
I will post a more technical version of how I tweaked their code to work for this situation later, but here is a quick explanation:
Normally to create all the rollover buttons on the page, eight separate images would be used and the old way even meant using javascript, which is a fairly cumbersome language compared to the simplicity of the CSS used here.
Very simply, instead of creating, editing and uploading eight images, all of the needed images are combined into one image. Then I just tell each button which part to use for the normal state and which part to use when the mouse hovers over it. The file size is smaller, so the page loads faster and if it ever needs to be edited or updated, I just download and edit one image instead of eight.
Here is the image:
(click for a larger view)When Jules had mentioned wanting to mouse over photos to reveal her logos underneath, I remembered reading about this somewhere, so I gave it a try.
Posts
