PDA

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.