Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Try to make javascript animation work but it won't

    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>

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Read this: Please format code in your posts using the [code][/code] tag!
    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

  • #3
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see I don't have firefox... and I finally got it to work.... thank for help.

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •