Web Animator - Final Stage

The final stage

All that now remains is for you to cut & paste the following short script, which was created from your hard work animating on the previous page.

To go between the <HEAD> & </HEAD> tags of your HTML:


<script language="Javascript">
<!--

//browser check

	ns = (document.layers)? true : false;

	ie = (document.all)? true : false;

//set up variables for later use

	var x_coords = new Array();
	var y_coords = new Array();

	var next_coord = 0;

	function aniImg(){
		
		imgObj = (ns) ? document.testImg : document.all.testImg.style;
		
		if(ie){
		imgObj.pixelLeft = parseInt(x_coords[next_coord]);
		imgObj.pixelTop = parseInt(y_coords[next_coord]);
		      }else if(ns){
		imgObj.left = parseInt(x_coords[next_coord]);
		imgObj.top = parseInt(y_coords[next_coord]);
		      }
		      
		imgObj.visibility = 'visible';
		
		next_coord++;
		
		if(next_coord==x_coords.length) {
		
		
		}
	
	 animate = setTimeout('aniImg();',);
		}

	//-->
	</script>

Simple as that. You will need to place your image in the BODY of your document using the code below. Obviously you can name your DIV whatever you want but you will need to change all references for it above.

You can put the initial position wherever on the page you want, as the animation function moves it to the start position before making it visible.

<div id='testImg' style="position: absolute; left: 0; height: 0; visibility: hidden; z-index: 10">

<img src="testimg.gif" border=0>

</div>

Of course you will need to call the function above. If you want your animation to start as soon as the web page is loaded, yo will need to call the function from the BODY tag, like so:

<body onLoad="aniImg();">

If you wish to call it from a button or a link, the code is similar:

<button value="Animate!" onClick="aniImg();">

or

<a href="javascript: aniImg();">

I hope you have found this tool useful. Please mail me with any comments, suggestions for improvements, or any problems that you are having. Also please swing by my personal site.

The final stage

Happy animating.