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

Thread: animate image in javascript

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    5

    Question animate image in javascript

    i have this assignment for class i was wondering if anyone could give me a hint on how to complete it:

    *)Display an image of a robot near the left side of a web page. The image can be any graphics file you find on the web or create yourself. May I suggest one of the cool Android mascots from the last Google I/O conference.
    Display a Start button on the page.
    When the Start button is clicked:
    the robot shall start moving to the right.
    the Start button shall become a Stop button.
    When the Stop button is clicked:
    the robot shall stop moving.
    the Stop button shall become a Start button.
    The Start/Stop button shall work repeatedly.
    After the robot exits on the right, it shall re-enter from the left. Suggestion: To support all browsers, use the screen width rather than the window width. *)

    I really need help getting the image to move and stop and move back with the button. If anyone could help it would be great.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    if you posted some code, Darth Vader could try to help, but now it seems that the Dark side still has your soul owned...

  3. #3
    Join Date
    Nov 2010
    Posts
    1,097
    Quote Originally Posted by jmarsh View Post
    I really need help getting the image to move and stop and move back with the button.
    so, basically... the entire assignment?

    post your code so far. maybe yoda has some free time today.

  4. #4
    Join Date
    May 2012
    Posts
    5

    this is what i got but not much

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">

    var robot = null; // object

    function doMove() {
    robot.style.left = parseInt(robot.style.left)+1+'px';
    setTimeout(doMove,20); // call doMove in 20msec
    }

    function init() {
    robot = document.getElementById('robotObject'); // get the "robot" object
    robot.style.left = '0px'; // set its initial position to 0px
    doMove(); // start animating
    }

    function buttonCheck() {
    if (document.getElementById.button.value == "Start") {
    document.getElementById.button.value = "Stop";
    } else {
    document.getElementById.button.value = "Start";
    clearTimeout(timeout_state);
    timeout_state = null;
    }
    }
    window.onload = init;

    </script>
    </head>
    </head>
    <body>

    <img src="tineye-robot.jpg" alt="Robot" />
    <input type="button"
    value="Start"
    onClick="Stop()" />
    </body>

    </html>


    its not close to working but i was hoping somebody could point me in the right direction. how do I assign the image to the javascript? thanks so much

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