The DynLayer's addon() method is automatically called when the DynLayer is initialized. I made this method specifically for the purpose of extending other properties and methods onto the DynLayer.
The core DynLayer contains the things that are almost always needed. But there are other properties and methods that are useful. For the standard DynLayer I recommend that the following properties be included into the addon method:
Other sections of this tutorial will use these properties, so if wyou want remove any of them be aware of which properties are being used.
The w and h Properties:
Just as you can retrieve the location of the layer using x and y, you can retrieve the width and height of the layer using w and h:
objectName.w or objectName.h
The doc Property:
The doc property can be used when you want to access other elements inside the layer such as images and forms. In Netscape, you normally have to reference HTML elements with respect to what layer they're in:
document.divName.document.elementName
IE is not sensitive to what layers HTML elements are in, so you just reference them as you would if they weren't in layers at all:
document.elementName
So to do this in both browsers you'd usually have to write 2 separate lines. But using the doc property you just have to do one:
objectName.doc.elementName
Changing Images Example:
mylayer.doc.images["myImage"].src = newimage.src
Form Elements Example:
mylayer.doc.myform.myformfield.value
View dynlayer-addon1doc.html for an example with an image change and a form value retrieval.
The event Property
Using the event property you can define events for your layer such as onMouseOver, onMouseOut, onMouseDown, and onMouseUp. I didn't incorporate onMouseMove because I don't believe you can capture the mouse co-ordinates from within a layer in IE - you can only do it with respect to the window so a mouseMove event for a layer isn't useful.
In Netscape you can't mark up the events like you can with normal tags such as an anchor. For example, the following will not work in Netscape:
<DIV ID="divName" onMouseDown="alert('you clicked the layer')"></DIV>
However, you can define the handlers quite easily using the DynLayer:
objectName.event.onmousedown = downHandler objectName.event.onmouseup = upHandler objectName.event.onmouseover = overHandler objectName.event.onmouseout = outHandler
Make sure you define the mouse events using all lowercase. The handler names can be whatever you choose. What you do in the event handler functions is up to you - just remember that the function will be called with respect to the layer itself, not the DynLayer. You will not have direct access to the DynLayer from that function. But what you can do is assign temporary properties to be retrieved in the handlers:
objectName.event.propertyName
Then in the handler you retrieve that new property as:
this.propertyName
This tactic can even be used to point back to the same DynLayer so that you still have access to the properties and methods of the DynLayer:
objectName.event.dynlayer = objectName
In the handler you gain access to the dynlayer with:
this.dynlayer.propertyName or this.dynlayer.methodName()
Example Handler:
The following code would hide the DynLayer when it is clicked on.
function init() {
mylayer = new DynLayer('mylayerDiv')
mylayer.event.dynlayer = mylayer // property to point back to mylayer object
mylayer.event.onmousedown = layerMouseDown
}
function layerMouseDown() {
this.dynlayer.hide()
}
I only played around with mouseDown, mouseUp, mouseOver, and mouseOut, and they all work perfectly. But other events may work as well, try them out for yourself if you wish.
View dynlayer-addon2events.html for an example using the event property.
The obj Property
The obj property is a string reference to the DynLayer. This property is necessary when methods use setTimeouts, or eval's to call itself. Both of those statements only accept strings. For example you cannot have a setTimeout inside a method when it is set up like this:
setTimeout(this + ".methodName()",100)
Instead you have to use the obj property:
setTimeout(this.obj + ".methodName()",100)
The obj property is used by addon methods such as the slide and wipe methods, as well as other objects that use the DynLayer.
The 3 addon methods, slide, clip, and wipe are part of the standard DynLayer and are explained in their own sections below.
| Home | Next Lesson: Geometric Objects |