|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Formularios - Botón de colores
Botón de colores
por Luciano Moreno, del departamento de diseño web de BJS Software.
Sin duda uno de los elementos más valiosos de una página web son los formularios, que nos permiten recabar datos del usuario de una forma cómoda.
Pero si algo ha caracterizado a los formularios de siempre ha sido su falta de originalidad, su adaptación a unos patrones feos y serios, tal vez por su propia funcionalidad y sentido enn la página.
Afortunadamente ahora disponemos de las Hojas de Estilos en Cascada, CSS, que junto con JavaScript nos permiten trabajar sobre los elementos de los formularios y añadirles ese componente de diseño que deseamos para nuestros formularios.
Vamos a ver en esta ocasión cómo podemos crear un botón de formulario que va cambiando de color cuando el usuario sitúa el puntero del ratón sobre él, y qye recobra su color inicial al abandonarlo el puntero. Ambos cambios de color son dinámicos, con lo que se consigue un bonito efecto. La pega es que no es cross-browser, ya que Nestcape Navigator 4x no admite la aplicación de estilos a los botones de un formulario. ¡Qué le vamos a hacer!. Pero sí funciona correctamente en Navigator 6x y en Internet Explorer.
El código a estudiar es el que sigue:
<html>
<head>
<title>boton
coloreado</title>
<script language="JavaScript"
type="text/javascript">
var
i=16;
var tiempo;
misColores =
["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function dentro(n)
{
if(n = =
0)
{
if(i>0)
{
i--;
color=eval("'#"+misColores[i]+misColores[i]+misColores[Math.abs(15-i)]+misColores[Math.abs(15-i)]+"00'");
document.miFormulario.button.style.background =
color;
tiempo=setTimeout("dentro(0)",100);
}
}
else if(n
= =
1)
{
if(i<14)
{
i++;
color=eval("'#"+misColores[i]+misColores[i]+misColores[Math.abs(15-i)]+misColores[Math.abs(15-i)]+"00'");
document.miFormulario.button.style.background =
color;
tiempo=setTimeout("dentro(1)",100);
}
}
}
</script>
</head>
<body>
<form
name="miFormulario">
<input type="button" name="button" value= "decolores"
onMouseOver="clearTimeout(tiempo);dentro(0)"
onMouseOut= "clearTimeout(tiempo);dentro(1)"style="background=red;border:1px
solid
blue;color:white;font-weight:bold;">
</form>
</body>
</html>
Consideraciones:
1) Definimos una variable, misColores, que va a contener todos los posibles valores del código hexadecimal, ya que el color en HTML se define mediante la sintaxis #abcdef, donde las letras corresponden a elementos de este sistema de codificación. La primera pareja, ab, representan el color rojo; la segunda, cd, al verde; y la tercera, ef, al azul. Los colores de la paleta web segura son aquellos de la forma #aabbcc, que son los que usamos en este caso.
2) Establecemos la función dentro(n), que recibe como argumentos posibles 0 (caso de cursor sobre el botón) o 1 (caso de cursor fuera del botón), que va a cambiar en saltos de 1 valor hexadecimal los componentes de color correspondientes al rojo y al verde, aumentando uno y disminuyendo el otro. Para animar la función, hacemos que se llame a sí misma cada 100 miliseghundos mediante el método setTimeout("funcion()", tiempo).
3) Para comprobar que los valores que toman los elementos del color están dentro del rango permitido por el alfabeto hexadecimal usamos una variable i que controla dichos valores, que limitamos a los permitidos.
4) Para obtener valores enteros y positivos en la función, usamos el método Math.abs(numero), que devuelve el valor absoluto del número que le pasemos como argumento.
5) Cuando llamamos a la función dentro() ponemos a cero el contador de tiempo usado en el método setTimeout(), para que se paren las llamadas anteriores a la función. Si no lo hicieramos estaríamos llamando dos o más veces a la función, cada vez con un argumento distinto, lo que haría que funcionara incorrectamente.
El resultado de éste código podéis verlo pinchando aquí.
Home - WebScript - Formularios - Botón de colores