Horizontal nav menu with jQuery css sprite rollover

Question

I was thinking of having a unique setup for my left navigation on my Mario themed website:

OK, so for each link, I would have the text like "Action Figures" for example in a certain font.

Give a little room, and then insert a sprite of a certain Mario character, Mario would go next to "Action Figures", Luigi next to "Board Games", so on, and so on.

Now, upon rollover of either the text or the placeholder sprite, the sprite executes a little animation sequence with pure jQuery no flash.

If the user is still hovered over after the little action (Mario will jump, perhaps) then you just look at the last sprite in the animation.

Upon mousing away from the text links, the placeholder sprite is returned, and upon rollover, the animation is executed again.

Now, what is the best way to perform this kind of idea. I would think CSS sprites with a little jQuery/JavaScript timer?

How should I approach this?

Answer 1

My question is why take such a big project if you dont understand flows :)

secondly you are asking us to basically work for you :) as there is a bit of work into it.

but look at background-position in css and jquery.

look at setTimeout and setInterval // for timer

look up hover in jquery for sprite rollover.