...

View Full Version : Try to make javascript animation work but it won't



Sara Fox
05-02-2008, 07:05 AM
Hi,

I am trying to make an animation with javascript... but I seem can't find what's wrong and why it didn't work. I am using owl image and want it fly to the boy.

Here's my code

external file:

function placeIt(id,x,y)
{
object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}

function shiftIt(id, dx, dy)
{
object=document.getElementById(id);
object.style.left=xCoord(id)+dx+"px";
object.style.top=yCoord(id)+dy+"px";
}

my html looks like:

<html>
<head>
<title>Harry Potter Fun</title>
<style type="text/css">
body
{
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #FFE87C;
background-image: url(stonebg.jpg);
background-color: black;
}

#Owl {position:absolute; top:0px; left:0px}
#Owl img {border-width: 0px}

</style>

<script type="text/javascript">

if (document.images)
{
var ImgOver = new Array();
ImgOver[0] = new Image();
ImgOver[1] = new Image();
ImgOver[2] = new Image();
ImgOver[0].src = "hpcg2b.jpg";
ImgOver[1].src = "hppq2.jpg";
ImgOver[2].src = "mhp2.jpg";

var ImgOut = new Array();
ImgOut[0]= new Image();
ImgOut[1]= new Image();
ImgOut[2]= new Image();
ImgOut[0].src = "hpcgb.jpg";
ImgOut[1].src = "hppq.jpg";
ImgOut[2].src = "mhp.jpg";

}

function RollOver(i)
{
if (document.images) document.images[i].src = ImgOver[i].src;
}

function RollOut(i)
{
if (document.images) document.images[i].src = ImgOut[i].src;
}

</script>

<script src="owl.js" type="text/javascript"></script>
<script type="text/javascript">


var x = new Array( -663, -624,-565, -546, -516, -486, -450, -411, -375, -351, -330, -306, -276, -246, -222, -189, -141, -117, -87, -57, -30, -15, 0 );

var y = new Array( -228, -255, -270, -273, -282, -282, -279, -267, -254, -236, -221, -200, -188, -164, -146, -134, -107, -95, -78, -59, -38, -23, 0);


var index=0;

function moveOwl()
{
if (index <= x.length-1)
{
shiftIt("Owl", x[index], y[index]);
index++;
setTimeout("moveOwl()", 15);
}
}


</script>

</head>
<body onload="moveOwl()">

<p style="text-align: center">

<table width="500">
<tr><td height="120">
</td></tr>
<tr><td>
<a href="HPcongame.HTM"><img src="hpcgb.jpg" onmouseover="RollOver(0)" onmouseout="RollOut(0)" border="0" /></a><br />
<a href="Potter.htm"><img src="hppq.jpg" onmouseover="RollOver(1)" onmouseout="RollOut(1)" border="0" /></a><br />
<a href="http://www.geocities.com/jedira_skywalker/index.html"><img src="mhp.jpg" onmouseover="RollOver(2)" onmouseout="RollOut(2)" border="0" /></a>
</td><td><span id="Owl"><img src="owl.gif" alt="Owl" /></span><img src="harry.gif" alt="Harry Potter"/></td>
</tr>
</table>
<br />
<br />
</p>
<hr style="width:300"/>
<p style="text-align:center">
<script type="text/javascript">
document.write(Date());
</script>
</p>

</body>
</html>

tomws
05-02-2008, 05:01 PM
Read this: http://www.codingforums.com/showthread.php?t=82672
Specifically, the subject line provides helpful information.

It's helpful to debug javascript (and more) using the firebug plugin for Firefox. It reports this error:

xCoord is not defined

Sara Fox
05-06-2008, 08:35 AM
I see I don't have firefox... and I finally got it to work.... thank for help.

fside
05-06-2008, 02:53 PM
I tend to write in Firefox, now, as well. Get the developer toolbar plugin. It has a host of things you can use. The 'bug' plugin remains useful, too. Both of those. And just for ones own viewing sanity, the NoScript plugin for Firefox is highly recommended.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum