Thumbnail preview rotator on mouse-over - what is it called?

Question

I've been searching for hours now but can't get any tutorial on this.

I have these thumbnails on my homepage which are the first images of their corresponding posts.

What I want is that when I mouse-over a post on the homepage... the corresponding thumbnail should also show/rotate the other images of that particular post... bit like a sneak-peak image rotator...

Does anyone know where I can get a tutorial regarding this? How's this called?

It seems like I'm searching for the wrong keywords on google as I can't find anything.

Answer 1

You need to have static and animated version of each thumbnail. One of simplest solutions would be to use:

<div style='width:100p; height:100px; background:url(static_thumb.gif)'></div>

and then to all such divs apply:

$('your divs').hover(
function(){ $(this).html('<img src='+process($(this).css('background-image'))+'>')},
function(){ $(this).empty() }
);

and lastly you need to specify the process function, that will change url(static_thumb.gif) into something like ani_thumb.gif.

Answer 2

What you are looking for is basically a combination of a dynamic tooltip, and an image rotator/slideshow. I'm not sure if I've ever seen them combined, but if you're familiar enough with PHP you could find each of those separately and combine them yourself.