A new breed of rollover buttons

To sum up my grievances with using JavaScript to create dynamic rollover images in one word: preloading (or lack thereof). On a slow/degenerate/IE browser, when you hover over a rollover image for the first time, there’s a noticeable delay while you wait for the new swapped image to appear… which translates into seemingly long dude-where’s-my-image moments.

And if I haven’t emphasized enough how absolutely IN AWE I am over how powerful CSS can be, take a look at this technique I used to create my “popping” navigation tabs:

I don’t recall where I first saw this used or how long I spent blinking at the code before I finally realized what it was doing. Nonetheless, by a stroke of luck I’ve somehow tamed it to work its magic on my site. You see, the entire tabs image actually looks like this

Notice the longer tabs on the bottom row? So, instead of creating two separate images for the regular button and the rollover button, I created a single image with one version stacked on top of the other. Clearly, the visitor doesn’t view the entire image. In my CSS script, I defined the visible area to be only the top half (with the shorter tabs) of the image, and in the hover-state, I shift each corresponding block of the image up enough pixels to reveal the bottom image. Thus, the popped-up version of the tabs have already been loaded they were part of the same image, and you’re left with the fastest rollover you’ve ever laid your cursor on. This genius technique is called the “Pixy” rollover (after its developer). Please celebrate it, use it, and spread the gospel so I don’t run into any more of the aforementioned traumatizing moments. Thank you.