Como modificar propiedades de color de fondo de objetos de un formulario al pasar el ratón por encima.
El leer el artículo sobre iluminación de tablas,
celdas, filas me parece muy interesante y necesario en algunas labores de
programación de páginas webs.
Paso 1:
Los colores de fondo de las cajas de texto y algunas
otras propiedas se manipulan más a menudo utilizando hojas de estilo. En este
primer paso lo hacemos bastante simple. Poner este script en el head
<head> xxx </head>
<script>
function form_uno(num_form,num_elem_form,color_entrada) {
document.forms[num_form].elements[num_elem_form].style.backgroundColor=color_entrada;
document.forms[num_form].elements[num_elem_form].focus();
}
function form_dos(num_form,num_elem_form,color_default) {
document.forms[num_form].elements[num_elem_form].style.backgroundColor=color_default;
}
</script>
Paso 2:
Agregamos el código de
la siguiente manera:
<form method="post" action=""
name="miformulario">
<p>
<input type="text" name="campo1"
onMouseOver="form_uno(0,0,'Lavender');" onMouseOut="form_dos(0,0,'ffffff');"
class="cajon" >
<br>
<input type="text" name="campo2"
onMouseOver="form_uno(0,1,'red');" onMouseOut="form_dos(0,1,'ffffff');"
class="cajon">
<br>
<textarea name="campo3"
onMouseOver="form_uno(0,2,'blue');" onMouseOut="form_dos(0,2,'ffffff');"
class="cajon"></textarea>
<br>
<select name="campo4"
onMouseOver="form_uno(0,3,'cccccc');" onMouseOut="form_dos(0,3,'ffffff');"
class="cajon">
<option value="1">uno</option>
<option
value="2">dos</option>
<option
value="3">tres</option>
<option
value="4">cuatro</option>
<option
value="5">cinco</option>
</select>
</form>
| El resultado es el siguiente: |
|
Hasta este punto vemos que nuestro formulario se ve bastante convencional,
para mejorar un poco nuestra presentación se debe incluir código de estilo, como
el que sigue:
Paso 3:
Poner este script en el head <head> xxx
</head>:
<style
type="text/css">
<!--
.cajon {
PADDING-RIGHT: 0.1em;
PADDING-LEFT: 0.1em; PADDING-BOTTOM: 0.1em; FONT: 9pt "Verdana, Tahoma, Arial";
MARGIN-LEFT: 0.1em; PADDING-TOP: 0.1em; BACKGROUND-COLOR: #FFFFF0; TEXT-ALIGN:
left
}
.boton {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000
1px solid; FONT-SIZE: 11px; BACKGROUND: #FFFFF0; BORDER-LEFT: #000000 1px solid;
COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; FONT-STYLE: normal;
FONT-FAMILY: verdana, arial, "trebuchet MS", helvetica,
sans-serif
}
-->
</style>
Paso 4:
Lo que queda solamente es hacer el enlace de los objetos
del formulario con el respectivo estilo que deseamos. Entonces el código
quedaría así como sigue y el resultado se ve en el siguiente cuadro.
<form
method="post" action="" name="miformulario2">
<input type="text"
name="campo12" onMouseOver="form_uno(1,0,'Lavender');"
onMouseOut="form_dos(1,0,'FFFFF0');" class="cajon"
>
<br>
<input type="text" name="campo22"
onMouseOver="form_uno(1,1,'red');"
onMouseOut="form_dos(1,1,'FFFFF0');">
<br>
<textarea
name="textarea" onMouseOver="form_uno(1,2,'blue');"
onMouseOut="form_dos(1,2,'FFFFF0');"
class="cajon"></textarea>
<br>
<select name="select"
onMouseOver="form_uno(1,3,'cccccc');" onMouseOut="form_dos(1,3,'FFFFF0');"
class="cajon">
<option value="1">uno</option>
<option
value="2">dos</option>
<option
value="3">tres</option>
<option
value="4">cuatro</option>
<option
value="5">cinco</option>
</select>
<input type="submit"
name="Submit" value="Enviar" class="boton">
</form>
| El resultado 2 es el siguiente: |
|
Las funciones form_uno y form2 se explican a continuación:
function form_uno(num_form,num_elem_form,color_entrada)
Los 2 primeros parámetros corresponden a números que representan a un
formulario (num_form) puedes fijarte que el primer formulario se llama
miformulario y el segundo miformulario2, en vez de emplear estos nombres se
emplean valores númericos, el siguiente parámetro representa un objeto de dicho
formulario (num_elem_form) y el tercer parámetro representa un valor de un color
o su respectivo nombre.
El cuerpo de cada función corresponden a la
manipulación de las propiedades de los objetos de los formularios.
|
