Rollover Images

These guys have a great tutorial for making rollover images. I tried to do this last year on some sort of java code writer site and had absolutely no success. This method takes what we’ve learned so far and MacGyver’s it in a really clever way.

In the tutorial they address the “old” way of doing rollovers that doesn’t use Java either, but flickers and (so I’ve seen) is relatively unreliable. Or, at least, I couldn’t make it work worth a darn. In that method, you’d use two images and instruct one image to be the static image (when you’re not hovering over it) and the other to be the rollover image that is displayed on top of the static image when you roll over it. The problem with this (as they explain–and I experienced) is that the background image isn’t immediately loaded when you go to the page. It only loads after you roll over the static image. My problem was that the two images that I was switching between (650 x 800 px multi-layered gifs) were too big to be loaded with any kind of fluidity. I’d imagine things would run smoother on a little 50 x 50 px button, but the problem still remains.

With this method, you stack the two pictures in one file and create a little window with a CSS block object that obscures the bottom picture (your rollover image). When you roll over the static image, it shifts up and bada bing, there’s yer rollover image, already loaded.

It might be interesting to experiment with. You could have a blank background and plant rollovers on the page with a top image the same color as the background. When you rolled over one of your images, the rollover image would seem like it was just appearing, or poking its head up or whatever.

–Josh Barnes


~ by hobodreams on November 23, 2010.

%d bloggers like this: