Not the beverage.
Joe from ArtLung discovered a cool new feature in CSS called Sprites. Sprites allow the web developer to create a single master image and then load parts of that image based off instructions in the style sheet. Joe took what he learned and created an updated home page for my portal site. So instead of loading 11 different images (each an HTTP call), the site now loads a single image and the CSS file positions the appropriate section of the image accordingly.
The entire page, including the roll-over images, comes from this single image file.
http://michaelallensmith.com/i/img/web-empire-sprite.png
Now for the glue. Here is the portion of the CSS file that loads the image for Coffee Hero and its mouse-over image.
a#CH { background-position: 0 -200px; width: 650px; height: 117px; }
a#CH:hover { background-position: 0 -327px; width: 650px; height: 117px; }
The regular Coffee Hero image slice is 200 pixels down on the main sprite image. It is 659 pixels wide and 117 pixels tall. The browser takes this instruction and it works. If you have no desire to count pixels, there are tools online to help you create your own Sprite, such as the CSS Sprite Generator.
For more detail on the optimization benefits, check out Optimize Your Web Site Using CSS Sprites.
Thanks Joe!
