OBJECT:
Layer
Layers
provide a way to position overlapping transparent or opaque blocks of
HTML content precisely on a page. When combining this functionality with
JavaScript the author of a web page now has the ability to dynamically
move or alter HTML elements, opening up new possibilities such as animation
and zooming in/out of elements. A Layer object is created
with every instance of the HTML <LAYER> or <ILAYER> tag in
a document. These objects are then stored in the layers array of the parent
document and accessed using either the name defined within the HTML tag
or an integer (with '0' being the first element defined, in source order,
in the specified form).
The ability to position elements above or below others requires a third
positional parameter. This is called the z-index (the higher the z-index
the more to the fore the layer is) and elements can be manipulated using
this parameter to dynamically move them, not just horizontally and vertically,
but also 'forwards' (above) and 'backwards' (below) relative to other
elements on the screen.
The following example creates two layers and uses the above attribute
of the layer tag to display the aboveLayer layer at the top.
Code:
<layer name=aboveLayer bgcolor="lightgreen" top=50
left=80 width=150 height=50> Hello from the layer above</layer>
<layer name=belowLayer above=aboveLayer bgcolor="lightblue" top=20
left=50 width=75 height=100>Layer below</layer>
PROPERTIES
above Property
If a layer is topmost in the z-order, this property relates to the enclosing
window object, otherwise it is a reference to the layer object above the
calling layer. An example of this property is given in the code above.
Syntax: layer.above
background Property
This property is used to set the image used for the backdrop of a layer.
The value is null if the layer has no image backdrop.
Syntax: layer.background.src
= "image"
bgColor Property
This property defines a document's background color. The "colorinfo"
argument is a string that can contain either the hexadecimal definition
of the color or its literal description.
Syntax: layer.bgColor
= "colorinfo"
below Property
This property represents the layer below the calling layer. The value
of this property is null if the calling layer is the bottom most in the
z-order.
Syntax: layer.below
clip.bottom Property
This property sets the bottom edge of the layer's viewable area (known
as the clipping rectangle). Anything outside of this area is not seen.
Syntax: layer.clip.bottom
clip.height Property
This property sets the height, in pixels, of the layer's viewable area
(known as the clipping rectangle). Anything outside of this area is not
seen.
Syntax: layer.clip.height
clip.left Property
This property sets the left edge of the layer's viewable area (known as
the clipping rectangle). Anything outside of this are is not seen.
Syntax: layer.clip.left
clip.right Property
This property sets the right edge of the layer's viewable area (known
as the clipping rectangle). Anything outside of this are is not seen.
Syntax: layer.clip.right
clip.top Property
This property sets the top edge of the layer's viewable area (known as
the clipping rectangle). Anything outside of this are is not seen.
Syntax: layer.clip.top
clip.width Property
This property sets the width, in pixels, of the layer's viewable area
(known as the clipping rectangle). Anything outside of this are is not
seen.
Syntax: layer.clip.width
document Property
This property is used to access the document contained within a layer.
All the methods available to the Document
object can also be used to modify the contents of the layer.
Syntax: layer.document
left Property
This property returns the horizontal position, in pixels, of the left
edge of a layer in relation to its parent layer.
Syntax: layer.left
name Property
This property returns a string that contains the name of a layer as defined
by the ID atttribute of the <LAYER> tag.
Syntax: layer.name
pageX / pageYProperty
These properties return the X (horixontal) and Y (vertical) position of
the specified layer in relation to the page containing it.
Syntax: layer.pageX
Syntax: layer.pageY
parentLayer Property
For a layer nested within another, this property is a reference to the
parent Layer object. If not a nested layer, this property refers to the
Window object that contains the layer.
Syntax: layer.parentLayer
siblingAbove Property
This property is a reference to the Layer object above the specified layer
in z-order, amongst layers that share the same parent layer. This property's
value is null if no sibling above exists.
Syntax: layer.siblingAbove
siblingBelow Property
This property is a reference to the Layer object below the specified layer
in z-order, amongst layers that share the same parent layer. This property's
value is null if no sibling above exists
Syntax: layer.siblingBelow
src Property
This property returns a string containing the URL of the source of the
layer's content. This is the same as the SRC attribute of the <LAYER>
tag.
Syntax: layer.src
top Property
This property is a reference to the top-most browser window that contains
the specified layer. Use this property to affect changes to the layer's
top-most window i.e. layerName.top.close().
Syntax: layer.top
visibility Property
This property determines whether or not a layer is visible.
Syntax: layer.visibilty
= "value"
zIndex Property
This property returns the relative z-order of the specified layer in relation
to any sibling layers. Any siblings with a lower zIndex are displayed
below the specified layer and any with a higher zIndex are stacked above.
Syntax: layer.zIndex
METHODS
captureEvents Method
This method instructs the window or document to capture all events of
a particular type. See the event object for a list of event types.
Syntax: layer.captureEvent(eventType)
handleEvent Method
This method is used to call the handler for the specified event.
Syntax: layer.handleEvent("eventID")
load Method
This method is used to change the contents of a layer by loading a file
containing HTML code into the layer.
Syntax: layer.load("fileName",
width)
moveAbove Method
This method is used to move the layer above the one specified with the
layerName argument.
Syntax: layer.moveAbove(layerName)
moveBelow Method
This method is used to move the layer below the one specified with the
layerName argument.
Syntax: layer.moveBelowlayerName
moveBy Method
This method is used to move the layer a specified number of pixels in
relation to its current co-ordinates.
Syntax: layer.moveBy(horizPixels,
vertPixels)
moveTo Method
This method moves the layer's left edge and top edge to the specified
x and y co-ordinates, respectively.
Syntax: layer.moveTo(Xposition,
Yposition)
moveToAbsolute Method
This method moves the specified layer to the pixel co-ordinates supplied
in the x and y parameters, relative to the page, as opposed to the parent
layer.
Syntax: layer.moveToAbsolute(xCoord,
yCoord)
releaseEvents Method
This method is used to release any captured events of the specified type
and to send them on to objects further down the event hierarchy.
Syntax: layer.releaseEvents("eventType")
resizeBy Method
This method is used to resize the layer by the specified horizontal and
vertical number of pixels.
Syntax: layer.resizeBy(horizPixels,
vertPixels)
resizeTo Method
This method is used to resize a layer to the dimensions supplied with
the width and height (both integers, in pixels) parameters.
Syntax: layer.resizeTo(outerWidth,
outerHeight)
routeEvent Method
This method is used to send a captured event further down the normal event
hierarchy; specifically, the event is passed to the original target object
unless a sub-object of the window (a document or layer) is also set to
capture this type of event, in which case the event is passed to that
sub-object.
Syntax: layer.routeEvent(eventType)
EVENT HANDLERS
onBlur Event handler
This event handler executes some specified JavaScript code on the occurrence
of a Blur event (when an window loses focus).
Syntax: layer.onBlur="myJavaScriptCode"
onFocus Event handler
This event handler executes some specified JavaScript code on the occurrence
of a KeyPress event.
Syntax: layer.onFocus="myJavaScriptCode"
onload Event handler
This event handler executes some specified JavaScript code on the occurrence
of a Load event.
Syntax: layer.onload="myJavaScriptCode"
onMouseOut Event handler
This event handler executes some specified JavaScript code on the occurrence
of a MouseOut event.
Syntax: layer.onMouseOut="myJavaScriptCode"
onMouseOver Event handler
This event handler executes some specified JavaScript code on the occurrence
of a MouseOver event.
Syntax: layer.onMouseOver="myJavaScriptCode"
|