PageResource.com - Web Development Tutorials

Move It!

How to move an object on the page
home    DHTML Pit Stop  |  DHTML/JavaScript Tutorial Index

Home/DHTML/JavaScripts/Move It!

What if you wanted to move an image out of the way to show you something else? DHTML allows you to do this, and this is what we will do in this tutorial.

Go ahead and click on the link below to see an example of this script in action:

Example Link

This is a fun little script you can add to your page. Keep in mind, this script only moves the image once, and it stays where you move it. We'll get to some more advanced movement in later tutorials.

So, to get what you in the example, we need to use a style sheet to position the image and the text where we want them to be. So, in your HEAD section, add this:

<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>

Notice that I used two classes to define the styles. The class "moveimage" positions the image, and the class "hiddentext" positions the text you saw when we moved the image away. I set the z-index on the text to 1 and the z-index on the image to 2. Things with a higher z-index will show up on top of those with a lower one, so the image covers the text so that we can't see it. If you need to know more about style sheets, see The Css Tutorials.

Now, we need to have a script to make the image move. So add this to your HEAD section also:

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

function moveit()
 {
  if (document.layers)
  {
   var picture=document.image1;
     if (picture.left<400)
       picture.left=400;
    }
  if (document.all)
  {
   var picture=document.all.image1.style;
      if (picture.left<400)
       picture.left=400;
    }
}

//-->
</SCRIPT>

Before I explain the script, let's look at what you need in your BODY section:

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

I didn't use an exact position on the link text, because it sat in the right place for me without it. You may wish to position the link with the style sheet instead.

Notice that we gave the image the ID "image1". This is used in the javascript to define it as an object so we can move it. We also used our two classes by adding the class=" " attribute to the two DIV tags. Notice that the link tag calls a javascript function. This is why the link ends up moving the image when clicked. If you want to read more on the javascript link, see the JavaScript Links Tutorial.

Now for the script. As you can see, the first thing we must do is figure out what kind of browser the viewer is using. This is because Netscape and IE have different Document Object Models (DOM). This just means that to access the style properties of the image, we will have to get there in a different way for each browser. We are using Object Detection to determine which browser the viewer has. For NS4, we check for the document.layers object. To access the style properties in Netscape, we used the following code:

if (document.layers)
  {
   var picture=document.image1;
     if (picture.left<400)
       picture.left=400;
    }

In Netscape, you can access the style properties by using the document property and the ID of the object. We created the variable picture to make the code following it easier to read. So, to get to the object, we used "document.image1". Since we made the variable "picture" to mean the same thing as "document.image1", we are able to access the "left" style property in the next lines by simply using "picture.left" rather than "document.image1.picture.left". To move the image, we use an "if" statement to check the location of the image from the left of the browser window. If the image is less than 400 pixels from the left of the screen, we redefine the "left" property to be 400 pixels. Since the "left" property was at 200 pixels to begin with, the script simply moves the image over to where it is 400 pixels from the left of the screen, uncovering the hidden message we wanted everyone to see!

In IE, you have to access the style properties in a different way. Here is the code we used if the browser was IE4:

  if (document.all)
  {
   var picture=document.all.image1.style;
      if (picture.left<400)
       picture.left=400;
    }

This time, we still use the document property first, but we also have to follow it with the "all" property. The "all" property is there because IE intends to give you access to "all" of the objects on a page, which should eventually allow more dynamic scripts to pop up. After the "all" property, we use the ID of the object, which was "image1". Now, we use yet another new property, the "style" property, which is intended to give us access to the "style" properties of the object. Put it all together, and we access the style properties of this object in IE with: "document.all.image1.style". As, in the netscape code, we shortened this with the variable "picture" in the if statement. Now we can just write "picture.left" instead of "document.all.image1.style.left".

You can also move the image up or down if you change the style of "top" property instead of the "left" property in the example. If you want to make it even more interesting, try changing both. You can move the image diagonally that way. Try it out and have a little fun. Just remember, these will still only appear in the right place in a version 4 browser....so it will probably need to be a "version 4 browsers only" page. Oh well, go have fun with it anyway!

Well, that does it for now. The next section is: An Object in Motion

previous
Previous
By: John Pollock next
Next

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