First off, I came across this posting and its just awesome. Its nice to create those no preload types of image rollovers that you see everywhere, with the nasty delay and such.

http://superfluousbanter.org/archives/000187.php

Here is the live example at superfluousbanter.org
http://www.nundroo.com/nav_matrix/welcome2.html

Yes, this technique has been talked about through many different blogs and forums, or a similar technique. But what is cool is that I guess this one prevents flickering in IE.

Well, i decided to take it upon myself to do an experiment with the Matrix Reloaded and add an additional feature. An animated matrix reloaded for the rollovers. He uses .png files, mine uses an animated .gif file.

I think its cool because it gives us non-flash designers the opportunity to create some nifty navigation elements that can be done with downloading only 1 image, not 4 or 5 everytime someone wants to rollover a button.

So here is my shot at adding a cool twist to the already awesome non-preload rollover method that SuperFlousbanter created.

My animated Matrix Reloaded rollovers

I hope you enjoy.

Bryan

Hi Bryan,

Thanks for sharing

The flickering in Ie can easily be solved by loading the hover state in the parent of the anchor and then just hiding the anchor image to allow the already pre-loaded image show through.

In the background position method the background is just moved to show a different image.

Although these techniques are relatively flicker free once loaded they all suffer from the flickering hourglass in ie (as with your example and the example you linked to).

I find this really annoying (even though some people hardly notice it) and I use the method shown below which completely eleminates the flicker and the hourglass and I believe to be the best of all the rollover techniques.

The only drawback is that one image has to be in the foreground (i.e. in the html).

Both these links show the method mentioned and do not suffer from flicker or hourglas and give a more pleasing effect.

http://www.pmob.co.uk/temp/cssrollovertabs.htm
http://www.pmob.co.uk/temp/cssrollover4.htm

You may wish to try it with your animated gif as the hourglass is very evident on that example.

While we're still on the subject theres an article here that you've probably seen already but is probably worth mentioning again. (It doesn't use my method but is uesful all the same)

http://www.alistapart.com/articles/sprites/

Paul

Its a very nice navigation, but with so much code just to avoid the flicker, I just don't think its worth it. It's almost as long as the rollover javascript.

well the idea behind it though is that it can work without javascript enabled, plus it degrades nice.

anywho, don't know as much as many ppl on this board about what is necessary in regards to css and what is overkill, I just wanted to post the animation version of the matrix that superflousbanter created.

I think its an economic way of creating a simple effect while allowing non-Flash users the availability of nice menu effects.

Good thinking...