HTMLpointHTMLpoint HTMLpoint.com


 Eventos con movimientos del ratón



En este grupo se pueden incluir los siguientes eventos:

  1. onMouseOver: activado cuando el ratón se mueve por encima de un objeto;
  2. onMouseOut: activado cuando el ratón sale de un objeto;
  3. onMouseMove: se mueve el cursor del ratón, pero dado que esto sucede a menudo (el uso del ratón es frecuente), no está disponible como opción por defecto, sino tan sólo unida a la captura de eventoos, que se explicará a continuación.

Los eventos onMouseOver y onMouseOut son complementarios ya que el primero se activa en el momento en que el cursor se coloca en el área del objeto cuya marca contiene el evento, mientras que el segundo lo hace cuando sale.

Para las versiones de Javascript, he aquí el cuadro de la situación (un color diverso del asterisco indica las modificaciones respecto a la versión precedente; NN está por Netscape e IE por Internet Explorer):

Evento

Versión Javascript

NN2.0 NN3.0 NN4.0 NN4.06 IE3.0 IE4.0 IE5.0
onMouseOver 1.0  * * * *   * * *
onMouseOut 1.0 * * * *   * * *
onMove 1.2     * *   * *

Los eventos onMouseOver y onMouseOut adquieren de la versión 1.0 a la 1.1 de Javascript la capacidad de estar asociados a la marca AREA, por lo que puede operar también con los mapas clicables; para Netscape, sin embargo, debe estar asociado también a la marca HREF, es decir, a un enlace, aunque ficticio.

Marcas sensibiles

Otro límite es el impuesto a Netscape y las viejas versiones de Explorer por las marcas a las que el evento puede ser asociado:

Evento Marcas asociadas en Netscape e JScript
onMouseOver Este gestor se usa con los botones de envío (submit), pulsanti de reset (reset), casillas de control (checkbox e radeo), botones, marcas <INPUT> de tipo OPTION y marca <A>.
onMouseOut Usado con las marcas <BODY> y <A>
onMouseMove Usado con los botones y las marcas <BODY> y <A>

Mucho más numerosas son las marcas asociadas en Explorer 4.0 y sucesivos a todos los tipos de eventos:

A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radeo, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Rollover

De enorme importancia es el evento onMouseOver combinado con onMouseOut para crear el efecto RollOver.

La sintaxis es muy sencilla:

<A HREF="#" onmouseover="document.images[num].src='imagen.gif'" onmouseout=document.images[num].src='imagen1.gif'">

donde la almohadilla sustituye a cualquier otro enlace, mientras que num es el número de índice de la imagen en la página HTML.

Hace algunos años, cuando no existían programas como Flash, el rollover era el efecto gráfico de mayor difusión y seguramente el más apropiado para convertir en dinámico un sitio y animar elementos estáticos como los menús y las barras de navegación.

Como ejemplo, inserto un rollover algo complejo, el que puede activarse con un mapa clicable. Hay que destacar que para funcionar en Netscape hace falta añadir en cualquier caso un enlace al área sensible, resaltada en rojo (incluso si ha sido sustituido por el signo almohadilla), mientras que en Explorer se puede omitir.

<area shape="rect" coords="2,2,59,26" onmouseover="document.images[num].src='images/tre.gif'" href="#">

¡Atención! images[num] individua el número de índice de la figura en la página y se obtiene contando el número de las marcas IMG empezando por 0 hasta llegar a la marca de la figura que nos interesa.



  Vuelve a principio de página