Moving images Using style sheets
 Animation can also be accomplished by moving the image around the screen using the X,Y coordinate system. This permits more flexibility of the movement - you are not confined by table cells.
  1. Create a web page that:
    • Has a div tag in the body that is named (Via the id atrribute)
    • Has a style of: style="position:absolute; left:10; top:180; width:240; height:300"
    • Has an appropriately sized image in the div tag
    • Has a button that calls a function onClick
    • The function consists of two lines:
      document.getElementById(id name).style.left="150";
      document.getElementById(id name).style.top="200";

    First attempt
  2. Modify the javascript code so that we position the image based on the size of the window:
    • declare global variables rightedge and bottomedge
    • Detect the browser and set the values appropriately
      Note: current browsers generally use document.body.clientwidth

    Second attempt
  3. Now, move it based on the size of the image
    • call setup from on load and create picleft and pictop
    • set picleft to style.left
    • set pictop to style.top

    Third attempt
    Hmmm....
    Put some alerts in and try adding to "left" and "top"
  4. Notice that the values for left and top changed from one dimension to two.
    Have function setup parseInt the values.
    Fourth(a) attempt
    Change the moving function to include a while loop that adds to the left and top.
    Try different values to add by. What do you like?
    Fourth (b)attempt
  5. That was fast! I couldn't see it move and it goes past the edge. Add a setTimeout.
    Fifth attempt