Start Free Trial

asked on

Image animation from a predefined array of images.

Hi,
I would like to know how could I create a page that contains an image .When a mouse moves over it , it's source keeps changing from a predefined array of images.
When the mouse moves out, its source returns to the first image of the array.

Thanks.
sherihan.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

<script >
var index = 0;
var frameSrc = new Array(
"https://www.experts-exchange.com/images/indexLogoPerson_01.gif",
"https://www.experts-exchange.com/images/indexLogoPerson_02.gif",
"https://www.experts-exchange.com/images/indexLogoPerson_03.gif",
"https://www.experts-exchange.com/images/indexLogoPerson_04.gif");

function preload(){
frameArr=new Array
for (i=0;i<frameSrc.length;i++)
{frameArr[i]=new Image
frameArr[i].src=frameSrc[i]
}
}

function nextFrame() {
index++
document.getElementById('theFilm').src=frameArr[index%(frameArr.length)].src
}
</script>

<body onload="preload()">
<img id="theFilm" src="https://www.experts-exchange.com/images/indexLogoPerson_01.gif"
onmouseover="index=0;timer=setInterval('nextFrame()',500)"
onmouseout="clearInterval(timer);this.src=frameArr[0].src;index++">
</body>

index++ in the mouseout can be removed

sherihan, Why have you accepted an answer that does not work?

...in IE that is.

ASKER

hi GwyforWeb,
why do u say that the accepted coad doesn't work.
I tested it and it works correctly.