Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
1  
Why do you think this has a specific name? I've never seen this done at all, never mind enough that it'd have a name. (Do you have any example links? Might just be a plugin) It sounds like it could be done with just about any image rotator and a little custom templating to put the markup in the necessary spots, though. –  Su' Apr 2 '12 at 22:09
    
carousel might be a useful keyword. –  William Jackson Jun 5 '12 at 19:13
add comment

2 Answers 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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.