1.4	Using JavaScript 1.2

If you want to do anything cool with layers, you have to use JavaScript 1.2. If you've used JavaScript before, it'll be easy for you to understand how to use it with layers. And most of the examples I'll be doing are pretty straightforward.

Properties

You can dynamically change any of the following properties of your layer:

name left top pageX pageY zIndex above (similar to zIndex) below (similar to zIndex) visibility

clip.top clip.left clip.right clip.bottom clip.width clip.height background bgColor src

Some examples...

1. Change the left position to 120 pixels:
   document.layers["layername"].left = 120;

2. Change the top position to negative 45 pixels:
   document.layers["layername"].top = -45;

3. Hide a layer:
   document.layers["layername"].visibility = "hide";

4. Show a layer:
   document.layers["layername"].visibility = "show";

5. Clip the bottom edge to 50 pixels:
   document.layers["layername"].clip.bottom = 50;

6. Clip the top edge upward 10 pixels:
   document.layers["layername"].clip.top -= 10;

7. Clip the left edge 10 pixels to the right:
   document.layers["layername"].clip.left += 30;

Remember that when changing values horizontally, negative (- or -=) means left and positive (+ or +=) means right. And when changing values vertically, a negative means upward, and positive means downward.

Methods

Most of the methods for layers are just combinations of the properties.

moveTo(x, y)	Changes the location of the layer to the (x, y) co-ordinate at the same time
moveBy(x, y)	Changes the location of the layer by adding (x) pixels to the left value, and (y) pixels to the top value at the same time
moveToAbsolute(x, y)	similar to MoveTo(x, y) but using absolute values (only useful for when nesting layers)
resizeTo(width, height)	Changes the width and height at the same time
resizeBy(width, height)	Changes the width and height by adding pixels
moveAbove(layer)	change the z-index so that it's above some layer
moveBelow(layer)	change the z-index so that it's below some layer
load(sourcestring, width)	changes the source file of the layer and the width at the same time

Some examples:

1. Move the left position to 100, and the top position to 50:
   document.layers["layername"].moveTo(100, 50);

2. Move the left position 15 pixels to the left, and the top position 5 pixels downward:
   document.layers["layername"].moveBy(-15, 5);

3. Resize the layer to 150 pixels wide and 50 pixels tall:
   document.layers["layername"].resizeTo(150, 50);

Event Handlers

In the layer tag you can apply these JavaScript event handlers:

onMouseOver	when you pass the mouse over the layer
onMouseOut	when your mouse leaves the layer
OnFocus	when you click the layer
OnBlur	when you click outside of the layer (after it a has been clicked already)
onLoad	when the layer has completed loading

An example:

<LAYER NAME="layer1" WIDTH=200 HEIGHT=100 onMouseOver="movelayer()">
This is my Layer
</LAYER>

Whenever you put your mouse over this layer, it will execute the function called "movelayer()".

A Note About Nesting

If you have nested layers, you have to work with them a little differently. Say we had our layers nested like so:

<LAYER NAME="parentlayer">
	<LAYER NAME="childlayer">
	</LAYER>
</LAYER>

To access "parentlayer" is done as normal, like document.layers["parentlayer"].left = 50. But when you access "childlayer" you have to add an extra 'document' in the command. For example:
document.layers["parentlayer"].document.layers["childlayer"].left += 20;

If you leave out the extra 'document' it won't work.

• 1.4 Using JavaScript 1.2
  • Hiding and Showing
  • Moving Layers
  • Moving on Diagonals
  • Clipping Layers

1.1 Introduction 1.2 Overlapping 1.3 Nesting 1.4 Using JavaScript	2.1 Sliding Layers 2.2 Pre-Built Functions 2.3 Clipping Layers 2.4 Looping Animations 2.5 Changing Images	3.1 Mouse-Click Animation 3.2 Capturing Keystrokes 3.3 Drag and Drop 4.1 Making Demos 4.4 Problems 4.5 Screen Sizes
Copyright © 1997 Dan Steinman. All rights reserved.