e-mail webmaster
Image Slicing via CSS
Taken from an article (CSS Sprites: Image Slicing's Kiss of Death by Dave Shea) on AListApart.
How do CSS Sprites work?
(This is a short extract from the article.)
As it turns out, the basic tools to do this are built into CSS, given a bit of creative thinking. Let's start with the master image itself. Dividing a rectangle into four items, you'll observe in this master image that our intended "before" link images are on the top row, with "after" :hover states immediately below. There's no clear division between the four links at the moment, so imagine that each piece of text is a link for now. (For the sake of simplicity, we'll continue to refer to link images as "before" images and the :hover state as "after" for the rest of this article. It's possible to extend this method to :active, :focus, and :visited links states as well, but we won't go into that here.) Those familiar with Petr Stanicek's (Pixy) Fast Rollovers may already see where we're going with this. This article owes a debt of gratitude to Pixy's example for the basic function we'll be relying on.I have to say I am impressed. I mean don't you just wish you thought of it? I do.
Fast Rollover in CSS
And citing, again, from Pixy's article on wellstyled.com.
When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.And here is an exmaple of two state tabs with the extra fix to tackle IE's (it is always IE with thte problems) flicker on loading background images.
