Utilizando la propiedad evento podrás definir eventos para tu capa como onMouseOver, onMouseOut, onMouseDown, onMouseUp, y onMouseMove.
En Netscape no puedes marcar los controladores de evento como puedes hacer con un ancla (anchor):
<DIV ID="divName" onMouseDown="/*your code*/"></DIV>
Como sea, puedes definir los controladores directamente utilizando JavaScript. Para Netscape utilizas:
document.layer[id].captureEvents(Event.MOUSEDOWN) document.layer[id].onmouseover = downHandler
Para IE:
document.all[id].onmouseover = downHandler
Para una solución cross-browser puedes definir los controladores con utilizar la propiedad evento DynLayer (el cual apunta al elemento actual en lugar de a las propiedades de CSS):
if (ns4) objectName.event.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE) objectName.event.onmousedown = downHandler objectName.event.onmouseup = upHandler objectName.event.onmouseover = overHandler objectName.event.onmouseout = outHandler objectName.event.onmousemove = moveHandler
Estés seguro de definir los eventos de ratón utilizando todo en minúsculas. El nombre controlador puede ser cualquier cosa.
Para Netscape tendrás que capturar los eventos que desees utilizar manualmente. Lo puedes ver en el capturarEventos (captureEvents) línea de como fijar estos. Si no necesitaras uno de ellos solamente remuévelo del comando. No tienes que capturar a los eventos mouseOver y mouseOut como aparece ya que estos son capturados de todas maneras (default).
Otra forma de definir tus controladores es utilizando new Function() comando nueva función. Haciendo esto de esta forma puedes pasar los parámetros fácilmente.
if (ns4) objectName.event.captureEvents(Event.MOUSEDOWN) objectName.event.onmousedown = new Function("downHandler('my string!')") function downHandler(string) { status = string }
Hay otra forma de pasar los parámetros, puedes temporalmente definir sub-propiedades al propiedad evento dynlayer y recuperar estos en la función del controlador:
if (ns4) objectName.event.captureEvents(Event.MOUSEDOWN) objectName.event.string = "my string!" objectName.event.onmousedown = downHandler function downHandler() { status = this.string }
Ver dynlayer-event1.html para un ejemplo del controlador mouseDown.
Ver dynlayer-event2.html Para cada evento excepto mouseMove (ver abajo el ejemplo para mouseMove).
En la función del controlador puedes recuperar la localización del ratón al utilizar los comandos siguientes:
var x = (ns4)? e.layerX:event.offsetX var y = (ns4)? e.layerY:event.offsetY
Los variables X y Y pueden entonces ser utilizados para hacer cualquier cosa que desees. Por ejemplo, aquí hay un código que mostrará la localización del ratón mientras esta encima de la capa:
function init() { mylayer = new DynLayer("mylayerDiv") if (ns4) mylayer.event.captureEvents(Event.MOUSEMOVE) mylayer.event.onmousemove = mouseMoveHandler } function mouseMoveHandler(e) { var x = (ns4)? e.layerX:event.offsetX var y = (ns4)? e.layerY:event.offsetY status = x+","+y }
Ver dynlayer-event3.html para un ejemplo mouseMove.
Para una explicación mas completa de los eventos del ratón leé la lección Drag and Drop Concetos.
Casa | Próxima Lección: Las Extensiones DynLayer |