Animation Step by Step
Animation using Javascript can be done multiple ways. One method is to use a table where you manipulate the images within the table. Create an image that you'd like to move through a "track" (i.e., table); also create a blank image that you will use to "cover" the moving image.
  1. Create a table with one row and four columns. Place the image you created in each of the four cells.
    First attempt
  2. Add javascript code in the head section that sets a variable to the string of the image name (e.g., "pic.jpg") Then replace the cells of the table with the blank image.
    Second attempt
  3. Add javascript code after the table that:
    1. Has a for loop that counts from 1 to the number of images -1 (document.images.length)
    2. Inside the loop simply have a document.write that prints the name of the image.

    Third attempt
  4. Change the document write to an assignment statement that sets the src to the variable you declared back in step two.
    Fourth attempt. WOW we're back to step 1 :)
  5. Add a button "GO" after the table. Move the script that is after the table to the head section and turn it into a function. Call that function as a result of onClick.
    Fifth attempt
  6. Change the for loop in the function to a recursive call.
    1. Make your loop control variable (i) global
    2. Add one to i after setting the image
    3. If i is more than the length, return
    4. else setTimeout to recursively call every second

    Sixth attempt
    Notice that there is an error after the 4th image is displayed....
  7. To see what is going on, in the else part add an alert to display i (You'll need { } in the else, now).
    Seventh attempt
  8. Don't see the error? Try putting another alert in at the beginning of the function to display the image length.
    Eighth attempt
  9. Change the > to >= and set the length variable before calling the function.
    Nineth attempt
  10. Now you're on your own. You need to "remove" the previous image when you place a new image.
  11. Now speed it up.
  12. Looks better, but would like to have the images closer,...