Notes on this design 12-22-06

This test is merely an implementation of the "fast rollovers" I have seen tutorials for on sites such as A List Apart and Well Styled.com. I have been looking for a long time for a well implemented hover technique that did not use any javascript and that also worked correctly in Opera. The thing with Opera is that the normal :hover technique in switching out two separate images doesn't work very well.

In browsers such as Firefox or Internet Explorer, two images works fine without preloading, provided the images are small enough. When you move the mouse over a link, the new "hover" image is loaded, just as it should. However, while Opera also loads the image, it does not actually display the new image until the mouse is moved off of and then back onto the link. If you hover the mouse over the link and just leave it there, then in Opera the image will disappear and no new image will appear. The only solution I could find to this was to preload the "hover" image, but this proved to be unsatisfactory at best.

This 'new' rollover (new only in the sense that I discovered it less then an hour ago) looks to be the perfect solution to my previous 'solution'. In this, both the normal image and the hover image are contained in the same image (the above example also has a third, active/onclick image). All that happens is that the position of the background image is moved up when the mouse hovers over the link. No preloading is necessary, for there is only one single image.

This works PERFECTLY in Opera. I think I have a new image hover technique!

Back to Design Tests Portfolio