Create animation on mouseover command

whodaman · Aug 21, 2003

Hi all,
What I am trying to create an animation without creating animated gif's. I was thinking on having a mouseover command call a function that changes the image.src in a given amount of time. How can this be done?

This is what I have now... i'm not sure why it doesn't really work. Can someone point me on where to look, or help me out with my code.

Thanks ahead of time

Code:

<script language=&quot;JavaScript&quot;>
<!--
	image = new Array();
	var counter = 0;
	do {
		image[counter] = new Image(); 
		image[counter].src = &quot;myImage&quot;+counter+&quot;.jpg
	} while (counter<12);


	function animate()
	{
		counter2=0;

		do {
			rollover.src = image[counter2].src;
			repaint();

			// Some pause set Interval

			if (counter2 == 12) counter2 = 0 ;
		} while (true);
	}

// ->
</SCRIPT>


<a href=blah.html onMouseOver=animate() onMouseOut = rollover.src = image[0].src>Animate</a>
<img name=rollover src=image[0].src width=504 height=285 border=0>

lillu · Aug 21, 2003

Hi,

I could have corrected your code but instead have a look at this amazingly simple animation.

Originally the script was triggered with the onload event without the user's interference and can serve as the simplest banner ever created.

I changed it to onmouseover as you requested and helas now the setTimeout which is a recursive function will fire every second for the first time the users rolls their mouse over the first image (1.gif)
If you continue to mouse over, the function will call itself again and eventually set the animation crazy (faster and faster).

HTH,

Lillu

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<img name="anim" src="1.gif" onmouseover="rotate();">
</body>
</html>

If you want to get a job done, ask a busy person. (Sherry Conway Appel - American writer)

http://www.geocities.com/lillamarta

whodaman · Aug 25, 2003

Thank you so much for your help. It is amazingly simple. Cheers!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Create animation on mouseover command

whodaman

Programmer

lillu

Technical User

whodaman

Programmer

Similar threads

Part and Inventory Search

Sponsor