mouseover & animated gif

[asatyss]

I am using an animated gif for a rollover effect on a button and was wondering if there was anyway, to set it up to complete the animation cycle before switching back to the still button. Basically, what I don't want to happen is for the animated gif to be halfway done witha cycle, and then the user mouses out and there is a kind of jolt effect back to the original image.

Is there any type of complete cycle piece of code I could throw in there?

Here are the related snippets of code.

<script>
img1On = new Image;
img1On.src = "ContactUsRoller.gif";
img1Off = new Image;
img1Off.src = "Copper Bar Contact2.jpg";

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+".src");
}

</script>

...

<a href="contact.html"><img src="Copper Bar Contact2.jpg" height="20" border="0" name="img1"
onMouseOver="swapImgs('img1','On');"
onMouseOut="swapImgs('img1','Off');"></a>

[glenngv]

try this:

var t,dTo,dFr;
var animGifCycleTime=10000;//in milliseconds
function swapImgs(img, imgSet) {
if (imgSet=="On"){
if (t) clearTimeout(t);
document.images[img].src = eval(img+imgSet+".src");
dFr = new Date();
}
else {
dTo = new Date();
duration = dTo-dFr;//in milliseconds
t = setTimeout("document.images['"+img+"'].src = " + img+imgSet+".src",animGifCycleTime-duration);
}
}

[asatyss]

Ok, I tried this, and it works, but there is one problem. When there are multiple buttons loaded, when you mouse over one, then mouse over another, the original one you moused over continues to rotate indefinitely until you go back and mouseover it and then it finishes its cycle. Is there any way to fix this?

Thanks for your help!

[RoyW]

When animating rollovers I find using javascript to animate all the frames is easier. Heres the reason why.
http://www.javascript-fx.com/ani_rollovers/compare/index.html
Take a look at these demos. Are they close to what you require?
http://www.javascript-fx.com/gng/newmenus/menu1.html
http://www.javascript-fx.com/menudev/go1.html
http://www.javascript-fx.com/menudev/jsfx5.html
If it close to what you need you can download the script from here
http://www.javascript-fx.com/ani_rollovers/index.html