Idees
[ Tornar a la pàgina d'informàtica ]

Un efecto cuando el cursor del ratón pasa sobre un botón

Haga formularios dinámicos mediante un formidable efecto cuando el cursor del ratón pasa sobre los botones.



Comience creando la hoja de estilo que se aplicará cuando el cursor del ratón pasa sobre el botón. Este estilo está definido en el encabezamiento de la página:

<STYLE>
  .style_bouton {color:white; background:navy}
</STYLE>
Especifique los colores utilizados para el botón:

  • color:white corresponde al color del texto.

  • background:navy corresponde al color del fondo del botón.

Después, inserte el siguiente script entre las etiquetas <head> y <head> de su página: Se utilizará para aplicar el estilo definido más arriba:

<SCRIPT LANGUAGE=JAVASCRIPT>
  function highlightButton(s) {
    if ("INPUT"==event.srcElement.tagName)
      event.srcElement.className=s
  }
</SCRIPT>
Ahora, especifique simplemente el estilo que se utilizará cuando el cursor del ratón pase sobre el botón. Todo está controlado en la etiqueta <form> que define el formulario:

<FORM NAME=highlight onmouseover="highlightButton('style_bouton')" onmouseout="highlightButton('')">
    <input type="button" Value="MouseOverMe">
</FORM>
Siempre puede aplicar otro estilo a su botón. Reemplace simplemente style_bouton por su estilo favorito, con la condición de que ya esté definido en la página.