 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Iluminar formularios con CSS y Javascript
Como modificar propiedades de color de fondo de objetos de un formulario al pasar el ratón por encima.
24/6/03 -
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.
Interesado en dicho artículo y con ayuda de Programación en Javascript II, que también se publica en este site, se muestra este pequeño
trabajo.
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.
<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.
|
Referencia:
Para entender mejor parte del código java script se recomienda leer el
manual Programación en Javascript II.
Definitivamente este código se puede mejorar y un pequeño ejemplo de esto lo
pueden observar en:
|
+ 3 categorias relacionadas
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Richar Mendoza*
Webmaster de AyacuchoEnLinea, Universidad San Cristóbal URL: http://www.ayacuchoenlinea.com Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en CSS
+ Entrar en Scripts en Javascript
| Comentarios de los visitantes |
|
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario. |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||||
Tienda DesarrolloWeb
