Layer Lesson 2

Part II: Adding Motion

Use these to jump around or read it all...

[How It's Done]
[Adding The Motion]
[Putting It Together]

First things first... This is a tutorial dealing with Netscape layers. You need to be running a Navigator browser at at least a 4.0 level to see the effect.

Now that's neat. If you keep clicking, it'll go faster. This second layer tutorial deals with adding motion to the layers you create. I will not be going into the creation of the layers themselves. For that, and before you attempt this tutorial, I strongly suggest you read the original Layer Tutorial. This one will only explain how to get the thing above.

How It's Done

There's really nothing new to placing each of the images above. They are placed using the LEFT and TOP commands in relation to the browser window. Here are the commands above that placed the red pole and the arrow images in that order.

The green and red poles are placed the same way. Notice now though that the NAME portion of the command is coming into play. The red pole was named "redpole." That makes sense.

The arrow image also has a name, "arrow." That will come into play in a moment -- but first look at the commands above that placed the arrow image. There is a new little deal stuck in there that reads:

ABOVE="redpole"

Notice when the arrow rolls across, it rolls over top of the red pole. Yeah, it looks like it's going under the poll, but remember that as layers are placed, the first placed is the first layer, then each builds, and so on.

I've only ever been able to place one ABOVE command, but when you start to play with this, you'll notice that the order the images are placed in the HTML document have an effect on what images are passed over and under. Mix the four images up. You'll get a different over/under deal with the same commands -- just placed in a different order. All you need is one. It doesn't matter what order the images are in for placement on the page. No matter the placement, it will always look the same, as the image will always place at the TOP and LEFT commands you enter.

In case you're wondering, the arrow only goes as far as the images are wide across in total.

Adding the Motion

This is JavaScript-driven. Here's the script you need to get it to run. Copy and paste it right from here if you'd like:

function movearrow() {
          var arrow = document.layers["arrow"];
          if (arrow.left < 400) {
               arrow.offset(5, 0);}
          else {arrow.left = 10;}
          setTimeout("movearrow()", 10);
          return;
     }

</SCRIPT>

Grab that script and place it inside your HEAD commands. Notice all the times the word "arrow" appears. Remember that the name of the moving image is "arrow." Look above at the command that placed the arrow layer. If you change the name you give to the moving image to anything else, you must go into this script and change EVERY "arrow" to the new name. Miss one, and it all falls apart.

Now use this to create the button that starts the motion:

Notice in the command above that the word "arrow" appears again. Just like above, if you change the name of the moving image, you have to change this also.

This is the button that starts the JavaScript, beginning the image's movement. The script will just sit there all day until this button is pushed to activate it. You need it.

Putting It Together

You'll need to get some images and use the layer commands to place them. Then pick which one will move. You can make it quite easy on yourself if you just name the one that is going to move "arrow" so you can just cut and paste from here.

Place the script in the HEAD commands and place the button that fires it all up in the BODY. At this point, you should be good to go. The motion should start.

I just want to restate what I said in the first tutorial: These layered images do not react like other images. You must make space for them. They place whether there is text or not. You will have fiddle with the top and left numbers a bit, but you'll get it. It's a neat effect, but keep in mind it only works with Netscape 4.0. Others cannot enjoy it, so use it with others in mind.

Enjoy!

[How It's Done]
[Adding The Motion]
[Putting It Together]