dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Can not get fish to swim

  1. #1
    Join Date
    Apr 2011
    Posts
    1

    Can not get fish to swim

    I can not get 2 of the fishes to move. I am trying to find a website or someone to help me understand why my 2 fish is not swimming here is my code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Fish tank</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    // <![CDATA[

    var fish1Position = 0;
    horizontal = new Array(50);
    var fillPosition = 10;
    for(var i = 0; i < 50; ++i) {
    horizontal[i] = fillPosition;
    fillPosition += 10;
    }
    function fish1Swim() {
    document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
    ++fish1Position;
    if (fish1Position == 49)
    fish1Position = 0;
    }
    function startSwimming() {
    setInterval(fish1Swim, 100);
    }

    // ]]>

    </script>
    </head>
    <body onload="startSwimming();">
    <p><span id="fish1" style=
    "position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
    <p><span id="fish2" style=
    "position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
    <p><span id="fish3" style=
    "position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>


    </body>
    </html>

  2. #2
    Join Date
    Dec 2010
    Posts
    207
    How do you expect to animate thee elements if you address only one of them?
    Did you even write this code?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles