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. #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. #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. #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
  •