The Dynamic Duo - The Dynamic Layer Object API [Using Layer-based Events]



loc = "../"






document.write(toccss)
document.write(tochtml)

Using Layer-based Events

Note: I am now using the elm property to define events. I left the event property in the DynLayer so that it's backward compatible.

Using the elm property you can define events for your layer such as onMouseOver, onMouseOut, onMouseDown, onMouseUp, and onMouseMove.

In Netscape you can't mark up the event handlers like you can with an anchor:


<DIV ID="divName" onMouseDown="/*your code*/"></DIV>


However, you can define handlers directly using JavaScript. For Netscape you use:


document.layer[id].captureEvents(Event.MOUSEDOWN)
document.layer[id].onmouseover = downHandler


For IE:


document.all[id].onmouseover = downHandler


For a cross-browser solution you can define the handlers using the DynLayer elm property (which points to the actual element rather than the CSS properties):


if (is.ns) objectName.elm.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE)
objectName.elm.onmousedown = downHandler
objectName.elm.onmouseup = upHandler
objectName.elm.onmouseover = overHandler
objectName.elm.onmouseout = outHandler
objectName.elm.onmousemove = moveHandler


Make sure you define the mouse events using all lowercase. The handler names can be whatever you choose.

For Netscape you have to manually capture the events that you want to use. You can see in the captureEvents line how to set them up. If you don't need one of them just remove it from the command. You do not need to capture the mouseOver and mouseOut events as it appears they are captured by default.

Another way to define your handlers is to use the new Function() command. Doing it this way you can pass parameters quite easily.


if (is.ns) objectName.elm.captureEvents(Event.MOUSEDOWN)
objectName.elm.onmousedown = new Function("downHandler('my string!')")

function downHandler(string) {
status = string
}


There is yet another way to pass parameters, you can temporarily define sub-properties to the dynlayer event property, and retrieve them in the handler function:


if (is.ns) objectName.elm.captureEvents(Event.MOUSEDOWN)
objectName.elm.string = "my string!"
objectName.elm.onmousedown = downHandler

function downHandler() {
status = this.string
}


View dynlayer-event1.html for a mouseDown handler example.

View dynlayer-event2.html for each of the events except mouseMove (see below example for mouseMove).

Using Mouse Coordinates

In the handler function you can retrieve the location of the mouse by using the following commands:


var x = (is.ns)? e.layerX:event.offsetX
var y = (is.ns)? e.layerY:event.offsetY


The x and y variables can then be used to do whatever you wish. For example, here's some code that will display the location of the mouse while over the layer:


function init() {
mylayer = new DynLayer("mylayerDiv")
if (is.ns) mylayer.elm.captureEvents(Event.MOUSEMOVE)
mylayer.elm.onmousemove = mouseMoveHandler
}

function mouseMoveHandler(e) {
var x = (is.ns)? e.layerX:event.offsetX
var y = (is.ns)? e.layerY:event.offsetY
status = x+","+y
}


View dynlayer-event3.html for a mouseMove example.

For a more thorough explanation of mouse events read the Drag and Drop Concepts lesson.

The Dynamic Layer Object API

Initialization
DynLayerInit() Function
Properties
Using Layer-based Events
Hide, Show, Move Methods
Slide Methods
Clip Methods
Write Method
css() and DynLayerTest() Functions
Download: dynlayer.js
View Source: dynlayer.js



Home
Next Lesson:
DynLayer Extensions


copyright 1998 Dan Steinman