Animated Image Rollovers

Hi everybody.

I’m trying to make a script, which would start an animation of an image link, when you mouseOver it and do the same in reverse, when you mouseOut. Something like here: [URL=”http://www.alistapart.com/articles/sprites2″]http://www.alistapart.com/articles/sprites2[/URL], but without jQuery or stuff like that.

It should use separated images, not animated GIFs.

I also found this: [URL=”http://www.javascript-fx.com/ani_rollovers/demo2.html”]http://www.javascript-fx.com/ani_rollovers/demo2.html[/URL], but their [URL=”http://www.javascript-fx.com/ani_rollovers/javascript/JSFX_AnimatedRollovers.js”]script[/URL] was just too hard to understand for me.

Gil Davis has this on his website: [URL=”http://gil.davis.home.att.net/rotate2.htm”]http://gil.davis.home.att.net/rotate2.htm[/URL], but this only works for 1 image. I guess I would need separate functions and variables for each image link, which doesn’t seem to be exactly a KISS solution.

I tried to make something by myself:

[CODE]
function mouseAction(up,imgName,fileName,max)
{
function animUp()
{
if (parseInt(source.substr(source.lastIndexOf(“.”)-1,1))!=max)
{
source=(fileName+(parseInt(source.substr(source.lastIndexOf(“.”)-1,1))+1)+”.png”);
} else
{
clearInterval(intervalId);
running=false;
}
}
function animDown()
{
if (parseInt(source.substr(source.lastIndexOf(“.”)-1,1))!=0)
{
source=(fileName+(parseInt(source.substr(source.lastIndexOf(“.”)-1,1))-1)+”.png”);
}
}
function waitForStop()
{
if (running) setTimeout(waitForStop(),100)
else intervalId=setInterval(“animDown()”,interval);
}
var interval=500;
var intervalId=0;
var running=false;
var source=window.document.images[imgName].src;
if (up)
{
running=true;
if (intervalId!=0) clearInterval(intervalId);
intervalId=setInterval(“animUp()”,interval);
} else waitForStop();
}[/CODE]

In my code, all images should have their sequential number as the last character before “.png” starting from [B]0[/B] and ending with [B]max[/B]. It was called in the body as:

[code=html]<a href=”#” onmouseover=”javascript: mouseAction(true,’foo1′,’bar1_’,4)” onmouseout=”javascript: mouseAction(false,’foo1′,’bar1_’,4)”><img name=”foo1″ src=”bar1_0.png” /></a>[/code]

However, this doesn’t work, because when the [B]mouseAction()[/B] function ends, [B]setInterval()[/B] can’t find the nested functions.

Does anybody know about a script that does what I need? Or do you have any suggestions to the posted scripts? Thanks for any advice.

Also in #JavaScript _↴