Use your JavaScript editor to open MoveImage.htm and examine the code. The script animates the image by moving it from its initial location to the specified location.
Observe the lines:
<SCRIPT
language="JavaScript" src="cpanim.js">
</SCRIPT>
It is possible to group several JavaScript functions into a single .js
file and reference it from your HTML code. That way you don't have to copy and
paste your functions every time you use them in an HTML document. Also, when
you change any of the functions, the change will be reflected in all the HTML
documents that use it.
The cpanim.js file contains cpMoveObj() function that we are going to use to animate an image. The function is defined as cpMoveObj(i, x, y, a, n); meaning: move object with the ID i to the location x, y by the amount of a pixels at a time. When the function completes, it will call cpSequencer(n) with the value n, unless n is set to 0.
The cpSequencer() function is used to sequence the events on a Web page. In this example it just displays a message once the animation is complete.
Note that the image that is being animated, JavaScript.gif, uses absolute positioning: that way it is easier to plan the action.
Address: C Point Pty Ltd, 71 Williamson Road, Para Hills 5096, Australia | |
Phone: +618 8263 3623 | Fax: +618 8396 1477 |
Web: http://www.c-point.com | Email: c-point@c-point.com |