Need Help Troubleshooting Some Image Animation Code 1

flasher40 · May 6, 2007

Hello,

Chip Chapin has a JavaScript "Eiffel Tower" animation example at:

http://www.chipchapin.com/WebTools/JavaScript/exampleA01.html

I know just enough about JavaScript (and programming in general) to get myself into trouble. I wanted to create an animation similar to the Eiffel Tower one at his website. So, I copied and pasted the code from the Eiffel Tower page into my editor and deleted all the non-relevant text, etc. Then, I took five .jpg images to test the process, renamed them anim0.jpg, anim1.jpg, etc., created the image exampleA01-anim0.jpg, and placed the images in the same folder as the .html page. Then, I changed all references from .gif to .jpg in the code.

Below is the resulting code. When I test the animation, the exampleA01-anim0.jpg appears, but the animation doesn't work. Any ideas on what I need to do differently to make it work? Thanks!

Bill

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
JavaScript Example A-1 -- Image Animation w/Speed Control
</title>

<script language="JavaScript">

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

</script>

<script type="text/javascript" language="JavaScript1.2">
anims = new Array(5);
var frame = 0;
var timeout_state = null;

function imageLoad() {
for(var i = 0; i<5; i++) {
anims = new Image();
anims.src = "exampleA01-anim" + i + ".jpg";
}
}

function animator() {
document.animImage.src = anims[frame].src;
frame = (frame + 1);
if(frame >= 5) {
frame = 0;
}
timeout_state = setTimeout("animator()", document.animForm.animPace.value);
}

function buttonCheck() {
if(document.animForm.animButton.value == "Start") {
document.animForm.animButton.value = "Stop";
animator();
} else {
document.animForm.animButton.value = "Start";
clearTimeout(timeout_state);
timeout_state = null;
}
}

</script>
</head>
<p>
<img src="exampleA01-anim0.jpg" name="animImage"
</p>
<form name="animForm">
<input type="button" value="Start" name="animButton"
onclick="buttonCheck()"><input type="text" value="250"
name="animPace">milliseconds
</form>
<br>
<br>
</body>
</html>

<script language="JavaScript">

</script>

BabyJeffy · May 7, 2007

I suggest you contact Chip Chapin and ask him - it's his code. Once you've removed Norton Security from your system... which is injecting hostile code into every page you view in an attempt to thwart popup code (and in effect damaging normal code).

Cheers with that,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

flasher40 · May 7, 2007

Thanks, Jeff

I have sent Chip an email but haven't heard from him.

If anyone else can see what's wrong with the code I've included in my original post, I'm still looking for suggestions.

That's the first I've heard about the problem you mentioned with Norton Security. Thanks for the tip.

Bill

flasher40 · May 7, 2007

Based on Chip's comment above about Norton, I stripped out what seemed to be that code. What's left is shown below.

Now, when I click on the START button, I get the error message:

Line 21, Char 9
'anims[...].src' is null or not an object

Any help with figuring out what's going on would be appreciated.

Thanks,
Bill

REVISED CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
JavaScript Example A-1 -- Image Animation w/Speed Control
</title>

<script type="text/javascript" language="JavaScript1.2">
anims = new Array(5);
var frame = 0;
var timeout_state = null;

function imageLoad() {
for(var i = 0; i<5; i++) {
anims = new Image();
anims.src = "exampleA01-anim" + i + ".jpg";
}
}

function animator() {
document.animImage.src = anims[frame].src;
frame = (frame + 1);
if(frame >= 5) {
frame = 0;
}
timeout_state = setTimeout("animator()", document.animForm.animPace.value);
}

function buttonCheck() {
if(document.animForm.animButton.value == "Start") {
document.animForm.animButton.value = "Stop";
animator();
} else {
document.animForm.animButton.value = "Start";
clearTimeout(timeout_state);
timeout_state = null;
}
}

</script>
</head>
<body>
<p>
<img src="exampleA01-anim0.jpg" name="animImage"
</p>
<form name="animForm">
<input type="button" value="Start" name="animButton"
onclick="buttonCheck()"><input type="text" value="250"
name="animPace">milliseconds
</form>
<br>
<br>
</body>
</html>

monksnake · May 7, 2007

Your problem is you're not ever calling the function imageLoad to load your images into the array anim.

I tested this so I know that is the problem.

[monkey]

<.

flasher40 · May 7, 2007

Could someone show me the specific code changes needed to solve the problem?

Bill

monksnake · May 8, 2007

I won't show specific code changes cause this should be completely elementary.

I will say put a call to the function imageLoad on the onload event of the <body> tag.

You should be able to figure it out based on that.

[monkey]

<.

flasher40 · May 8, 2007

After reviewing Chip Chapin’s (see start of my opening post) explanation, I made the following changes to my code:

1. From: <body>
To: <body onLoad="imageLoad()">

2. (2 lines below <body …>)
From: <img src="exampleA01-anim0.jpg" name="animImage"
To: <img src="anim0.jpg" name="animImage">

In short, the final section of code is now:

<body onLoad="imageLoad()">
<p>
<img src="anim0.jpg" name="animImage">
<form name="animForm">
<input type="button" value="Start" name="animButton"
onclick="buttonCheck()"><input type="text" value="250"
name="animPace">  milliseconds
</form>
<br>
<br>
</body>
</html>

Now, the initial image keeps flashing on and off, but no animation occurs.

I’ve created a web page using the code:

http://bmbweb.home.comcast.net/animation_example.html

(Aside: If you try viewing the source code on that web page and see code beginning with ” function SymError(),” that means your Norton Security program has inserted crippling code.)

Bill

monksnake · May 8, 2007

I'm sorry, in the example I tested I did a little more changes than just what I posted.

Here are the imageLoad and animator functions after I changed them:

Code:

function imageLoad() {
     for(var i = 0; i<5; i++) {
         anims[i] = new Image();
         anims[i] = "exc-error-icon.gif";
     }
}                       

function animator() {
        document.animImage.src = anims[frame];
        frame = (frame + 1);
        if(frame >= 5) {
                frame = 0;
        }
        timeout_state = setTimeout("animator()", document.animForm.animPace.value);
}

Note the changes in these 2 statements

anims = "exc-error-icon.gif";
document.animImage.src = anims[frame];

In this example I just kept the same image, but made sure the anims array iterated.

<.

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!

Need Help Troubleshooting Some Image Animation Code 1

flasher40

Technical User

BabyJeffy

Programmer

flasher40

Technical User

flasher40

Technical User

monksnake

Programmer

flasher40

Technical User

monksnake

Programmer

flasher40

Technical User

monksnake

Programmer

Similar threads

Part and Inventory Search

Sponsor