Formulario luminoso

graphictools · #1 (**permalink**) 30/04/2005, 08:40

Hola!!

Tengo una tremenda duda existencial con un formulario.

Los chicos 2advanced la tienen re-clara, y diseñan unos sitios espectaculares...

En la mayoría de los sitios que incluyen HTML usan un efecto en los formularios que quisiera saber si algunos sabe como carambolas se hace... CSS? Java? ... supongo que a más de uno le gustará saberlo. Si alguien sabe me podría decir como se hacen?¿

Creo haber escuchado algo sobre Java, pero me parece que no se ve así...

...no sé.

Les paso dos sitios donde aparecen estos efectitos en el formulario.
buscar en la sección de "contact".

Zen Festival
Greer Systems

Sds.GT

El_Metallick · #2 (**permalink**) 30/04/2005, 09:46

Hola amigo... viendo en el código de fuene encontre esto:

Código:

 
<input type="textfield" class="txtBox2" name="firstname" style="width:300" onFocus="setBgImageOverContact(this,'../images/frmshadow_txtBox2-on.jpg')" onBlur="setBgImageContact(this,'../images/frmshadow_txtBox2-off.jpg')">

el códieo que te señale con negrita es el que permite que el color cambie... o por lo menos eso creo pues es lo único nuevo que vi en ese formulario.... prueba cambiandole el nombre de las imagenes y creando imagenes a tu gusta y avisame si te funciona.... bueno eso pues saludos y suerte

JavierB · #3 (**permalink**) 30/04/2005, 09:49

Hola graphictools

Está hecho con Css, poniendo una imágen de fondo a los cuatros de texto:

background-image: url('tuimagen.jpg')

Saludos,

piero19 · #4 (**permalink**) 30/04/2005, 09:50

Hola:
tambien puesdes darte una vuelta en las FAQ de CSS.

saludos...

graphictools · #5 (**permalink**) 30/04/2005, 10:02

gracias JavierB y piero19, pero creo la cosa anda por el lado de El Metallick...de todos modos probaré lo que él me dice. y luego les cuento.
Sabía que con CSS podés lograr ese efecto de imagen de fondo, el tema es lograr que cuando te pongas sobre el campo este cambie de color o de imagen.

Gracias.

graphictools · #6 (**permalink**) 30/04/2005, 10:04

Aunque si saben como darle ese efecto con CSS....no estaría nada mal. Se puede lograr?¿

JavierB · #7 (**permalink**) 30/04/2005, 10:18

Hola de nuevo.

En efecto eso ya sería cosa de JavaScript. Te pongo un ejemplo sencillo:

Código PHP:

  <html> 
<head> 
<style type="text/css"> 
.txt1 {background-image:url('imagen1.jpg')}; 
.txt2 {background-image:url('imagen2.jpg')}; 
</style> 
<script type="text/javascript"> 
function ini() { 
  for(i=0;ele=document.getElementsByTagName('input')[i];i++) { 
    ele.className='txt1'; 
    ele.onfocus = function() {this.className='txt2'} 
    ele.onblur = function() {this.className='txt1'} 
  } 
} 
</script> 
</head> 
<body onload="ini()"> 
<input type="text" /> 
<input type="text" /> 
<input type="text" /> 
</body> 
</html>

Saludos,

graphictools · #8 (**permalink**) 30/04/2005, 10:43

Gracias JavierB!!! es eso lo que andaba buscando. Funciona de maravillas..

Ahora la pregunta de rigor. Ya tengo un formulario con algunos atributos en CSS.
Probé ese código y me cambió casi todos los campos a ese efecto.

Te paso un link para que veas como queda, y ver si podés darme una mano.
Quisiera que solamente se aplique el efecto a los campos del formulario (si te fijas falta el del mensaje) y no que se aplique al campo que está a la derecha (Recomienda a un amigo)...algo hice mal?...puse mal el código?

Gracias y espero tu respuesta o la de cualquiera que pueda ayudarme.....MIL GRACIAS!!!

http://www.graphictools.com.ar/hotelmc/contacto.htm

Sds.GT

graphictools · #9 (**permalink**) 30/04/2005, 10:46

Otra cosa que me olvidé: Tambien me cambió el color del botón enviar. Se puede aplicar ese código sólo a los campos que yo quiera?...

Gracias

Sds.GT

JavierB · #10 (**permalink**) 30/04/2005, 11:08

Hola.

No es que hayas hecho nada mal, es que el código que te puse era un código general. Lo he adaptado un poco a tus necesidades:

Código PHP:

  <script type="text/javascript">  
function ini() {  
  for(i=0;ele=document.form2.elements[i];i++)  
    if(ele.type != 'submit') { 
      ele.className='txt1'; 
      ele.onfocus = function() {this.className='txt2'}  
      ele.onblur = function() {this.className='txt1'}  
  }  
}  
</script>

Otra cosa, te recomiendo que pongas el código JavaScript en la sección <head> de tu página, lo tendrás todo más a mano.

Saludos,

graphictools · #11 (**permalink**) 30/04/2005, 11:37

Millones de Gracias. Te pasate. :)

Sds.GT

JavierB · #12 (**permalink**) 30/04/2005, 11:50

Me alegro de que te haya servido. Si tienes más dudas, no dudes que alguien por aquí te ayudará a solucionarlas

graphictools · #13 (**permalink**) 30/04/2005, 12:57

Hola again. Dejo el resultado de esta tema. El formulario quedó como quería.
Para algunos parecerá un tema simple, pero para mí es importante saber que AQUI se encuentran soluciones a los porblemas cotidianos.

Gracias.

Link en cuestión:
http://www.graphictools.com.ar/hotelmc/contacto.htm

Sds.Gt

tunait · #14 (**permalink**) 02/05/2005, 02:01

Vamos al foro de javascript

movido desde (x)html

saludos