animate image in javascript

**jmarsh** · 05-12-2012, 04:34 PM

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.

**Padonak** · 05-13-2012, 09:03 AM

if you posted some code, Darth Vader could try to help, but now it seems that the Dark side still has your soul owned...

**xelawho** · 05-13-2012, 09:15 AM

Originally Posted by jmarsh

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.

**jmarsh** · 05-14-2012, 07:47 PM

<!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: animate image in javascript

Thread Tools

Display

animate image in javascript

this is what i got but not much

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions