PageResource.com - Web Development Tutorials

An Object in Motion

How to animate an object
home    DHTML Pit Stop  |  DHTML/JavaScript Tutorial Index

Home/DHTML/JavaScripts/Object in Motion

Perhaps you would rather have a smooth animation instead of a sudden movement to a new place. In this section, we'll animate the image to move it to its new destination. This makes things a bit more complicated, but we can get through the rough areas without too much trouble. You may want to read through the JavaScript setTimeout tutorial and the previous DHTML image tutorial if you have not already read them.

Now, let's begin by looking at what we want the script to do. Click the example link below and you will get a new window with a link and an image. Click the link to make the image animate. The image will move away and uncover the hidden message, it moves to the right until the left edge reaches 400 pixels accross the window.

View Example

So, where do we start? Let's begin by placing our style classes inside the head tags of the document:

<STYLE type="text/css">
 <!--
 .moveimage { position:absolute; left:200; top:10; z-index:2 }
 .hiddentext { position:absolute; left:200; top:10; font-weight:700;
  width:100; border-style:double; z-index:1 }
 -->
</STYLE>

As in the previous section, we will use the moveimage class for the image, and the hiddentext class for the hidden text. Both of them start out in the same place, and the image covers up the text since we set the z-index of the image to a higher number (2) than the text (1).

Also inside the head tags, we want to place the script that will handle the animation once we click on the link. Here is the entire script for the head section, we'll work out the details afterward:

<SCRIPT language="JavaScript">
<!--

function moveit(spot)
{

  if (document.layers)
  {
   var picture=document.image1;
       if (spot<400)
      {
        picture.left= spot;
        spot+=5;
        setTimeout('moveit('+spot+')',100);
       }      
    }
  
if (document.all)
  {
   var picture=document.all.image1.style;
       if (spot<400)
      {
        picture.left= spot;
        spot+=5;
        setTimeout('moveit('+spot+')',100);
       }      
    }

}

//-->
</SCRIPT>

The first thing you will notice about the function moveit() is that it takes in a parameter when it is called.

function moveit(spot)

So, when we call the function later, we must call it with a value, which will be given to the variable "spot". When we call the function from the link tag, we will use the number 200 for this value. Remember, 200 is the position from the left of the window that our image is at when the page opens. The HTML that goes inside the body tags will look like this (note the moveit() function call):

  
<A HREF="javascript:moveit(200)">Click to move image</A>
<DIV ID="image1" class="moveimage">
<IMG SRC="scare.jpg">
</DIV> 
<DIV class="hiddentext">
Hello There!
</DIV>

In the HTML, you will see that we also assigned the css classes to the DIV tags, and also gave the DIV tag for the image an ID of "image1". We will need the ID "image1" when we want to access the image inside the script. So, let's get back to the script.

Now that we know the variable "spot" starts out as the number 200, we can use it to begin the animation of the image. First, we need to check for the browser type. We do this with object detection. The first browser we check for is NS4+, so we check for the document.layers object:

if (document.layers)

Now, we create a variable called "picture". This allows us to hold the value we need to access the DIV object with the image. Since the ID of the object was "image1", you can access it in Netscape with document.image1, which isn't all that long anyway:

var picture=document.image1;

That step comes in handy if you use the object multiple times, or if you have to go through a long series of dot operators (.) to access the object. Here, it only shortens the later work a little bit.

Now, we need to know what to do with everything. Well, we want to move the image out of the way to display the hidden text. We want to be sure it moves far enough away, so we are going to move it so that it ends up having its left edge at 400 pixels from the left of the screen- starting from the 200 pixles it is currently at.

This is where our variable spot comes in. We gave it a value of 200 for a reason: to match the amount of pixels from the left of the screen that the image was placed at using the style sheet. Remember, we used left:200 in the style sheet for the image. Now we want the left value to go to 400 pixels. So, we start off by checking whether the object has a left value that is less than 400 pixels. Since spot starts as the same number as the left value of the object, we will check whether spot is less than 400:

if (spot<400)

Once we know this, we can continue. The first time through, spot is 200. So this will be less than 400, and allow us to proceed. The next step is to assign the value of "spot" to the left value of the object. This is done with the "picture" variable from above (which is document.image1). To get the left value, we add on the word left to the end with another dot operator:

picture.left= spot;

Now we can increase the left value of the object by increasing the value of the variable "spot". For this animation, we will increase it by 5 pixels each time the function is run:

spot+=5;

Nice, but it will only work once if we don't find a way to call the function again. To call the function again, we will use a setTimeout() call:

setTimeout('moveit('+spot+')',100);

You will notice that it calls the moveit() function again after 100 milliseconds. It will continue until the value of "spot" is 400 or more. However, you will also notice that the parameter to moveit() is now "spot", but the variable has some strange "+" signs around it and extra quote marks outside the "+" signs. Why couldn't we just write:

setTimeout('moveit(spot)',100);

Well, if we did it this way, we will not get the value of the variable spot when the function is called. We'll get an unknown value of some kind. We need to escape the quote marks that the setTimeout function uses to call the moveit() function, so that we get the actual value of the variable "spot". That is where the '+ and +' symbols come in. Placing the variable name inside the '+ and +' will escape the outer quote marks and give you the value of the variable. So, rather than sending a random variable "spot", we are able to send the value we gave to the variable spot inside the function. This allows the value of "spot" to increase by 5 each time and continue the animation.

Of course, the next step is to do the same work if the browser is IE4+. Other than the detection of the document.all object and the difference in the Document Object Model, we do the same thing:

if (document.all)
  {
   var picture=document.all.image1.style;
       if (spot<400)
      {
        picture.left= spot;
        spot+=5;
        setTimeout('moveit('+spot+')',100);
       }      
    }

As you can see, we access the object in IE in a slightly different way. Rather than document.image1, we have to drill down to the object with document.all.image1.style- which we assign to the "picture" variable like we did above to shorten the code later. This time it saves a little extra writing since there was a lot to go through to get to the object. You'll notice the steps are exactly the same afterward.

Well, that was an introductory animation script. You could also use the top property if you want to try moving up and down. Let's move on to the next section, a guest tutorial from Bill Peterson on dynamic cross-browser scrollers.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy