animating a gif

swydell · 11-09-2011, 10:33 PM

I'm trying to create this animated gif array. Everything is in place, almost exactly like another one I did successfully. But I must be overlooking something here. If anyone can take a look at the code and give me suggestions I would appreciate it. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>puppies</title>
<script type="text/javascript">
var rusty=new Array(7);
rusty[0]="puppies/puppy.gif";
rusty[1]="puppies/puppy0.gif";
rusty[2]="puppies/puppy1.gif";
rusty[3]="puppies/puppy2.gif";
rusty[4]="puppies/puppy3.gif";
rusty[5]="puppies/puppy4.gif";
rusty[6]="puppies/puppy5.gif";
var myPup=[0];

function getPup(){

if(myPup<rusty.length){
myPup = 0;
}
else{
document.getElementById("pup").src="puppies/"+ rusty[myPup];
myPup = myPup+1;

}

}
setTimeout("getPup()", 1000)
</script>
</head>

<body>
<h1>Puppies</h1>
<img src="puppies/puppy0.gif" id="pup" width="97" height="60" alt="puppy" onclick="getPup()"/>

</body>
</html>

devnull69 · 11-09-2011, 11:14 PM

What is this line supposed to do?

Code:

var myPup=[0];

With this line you are creating an array with just one element. So myPup[0]==0. But later you want to use myPup as an integer. So I think you should change the line to

Code:

var myPup=0;

swydell · 11-10-2011, 12:46 AM

I made the change. You can see it here. Thanks. Yet, 'm still not getting the animation. Each image is a different pose of the puppy to make it appear running. I think my logic is wrong. Any suggestions.?

var myPup=0;

function getPup(){

if(myPup<rusty.length){
myPup = 0;
}
else{
document.getElementById("pup").src="puppies/"+ rusty[myPup];
myPup = myPup+1;

}

}
setTimeout("getPup()", 1000)
</script>
</head>

<body>
<h1>Puppies</h1>
<img src="puppies/puppy0.gif" id="pup" width="97" height="60" alt="puppy" onclick="getPup()"/>

devnull69 · 11-10-2011, 07:57 AM

Yes, and you would have also seen it even without a decent debugger tool

Just step through your code with pencil and paper and note variable values.

You'll see the following
1. myPup is set to 0
2. a timer is started that will call getPup() after one second
3. in getPup() you check if myPup is less than the length of the array (which is true of course as 0<7). In that case you set myPup to 0 again

This is where the problem is. I think you only need to change myPup<rusty.length to myPup==rusty.length

In that case
3. in getPup() you check if myPup is equal to the length of the array (which is false of course as 0 is not equal to 7)
4. in the else branch you have code to show rusty[0] and increase myPup by 1

Second problem here: There is no timer that will call getPup() again. setTimeout will only work once.

So EITHER you change setTimeout to setInterval OR you call setTimeout again at the end of the function getPup()

clausrei · 11-16-2011, 08:31 PM

Don't quite understand, why you try to make an animated GIF with a Java Script? Animation is a fetcher of the GIF picture format.

Have a look at this:
http://www.youtube.com/watch?v=f-9_HwRcd1A

Kor · 11-17-2011, 01:31 PM

Why JavaScript?

As long as you are using GIF images, you could simply create an animated GIF using a graphical tool, such as Photoshop or even GIMP. GIMP is a freeware graphical tool, so that you have nothing to pay for.

asok_coding · 12-07-2011, 09:42 AM

Quote:

Originally Posted by swydell

I'm trying to create this animated gif array. Everything is in place, almost exactly like another one I did successfully. But I must be overlooking something here. If anyone can take a look at the code and give me suggestions I would appreciate it. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>puppies</title>
<script type="text/javascript">
var rusty=new Array(7);
rusty[0]="puppies/puppy.gif";
rusty[1]="puppies/puppy0.gif";
rusty[2]="puppies/puppy1.gif";
rusty[3]="puppies/puppy2.gif";
rusty[4]="puppies/puppy3.gif";
rusty[5]="puppies/puppy4.gif";
rusty[6]="puppies/puppy5.gif";
var myPup=[0];

function getPup(){

if(myPup<rusty.length){
myPup = 0;
}
else{
document.getElementById("pup").src="puppies/"+ rusty[myPup];
myPup = myPup+1;

}

}
setTimeout("getPup()", 1000)
</script>
</head>

<body>
<h1>Puppies</h1>
<img src="puppies/puppy0.gif" id="pup" width="97" height="60" alt="puppy" onclick="getPup()"/>

</body>
</html>

Hi i am new to this forum. i want to tell u some changes in code as shown below:

var mayPup;
function getPup(){

if(myPup<rusty.length){
document.getElementById("pup").src="puppies/"+ rusty[myPup];
myPup = myPup+1;

if(myPup==rusty.length)
myPup = 0;

}

}