En este grupo se pueden incluir los siguientes eventos:
- onMouseOver: activado cuando el ratón se mueve por encima de un objeto;
- onMouseOut: activado cuando el ratón sale de un objeto;
- 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.
