Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/02/2012, 14:33
Avatar de koolj
koolj
 
Fecha de Ingreso: octubre-2011
Mensajes: 27
Antigüedad: 13 años
Puntos: 1
Exclamación Mensaje para un input type="text"

Hola amigos...
No sabia que poner de título :)

La cosa es asi
Estoy haciendo un formulario y quiero que al estar en una caja de texto aparezca un mensaje que ayude o que especifique que escribir en la caja de texto.
Ya casi lo tengo pero el mensaje sale donde no quiero y no se como hacerlo salir al lado de la caja de texto y que no se muevan las otras cosas.

Les pongo el código para que lo vean y me puedan ayudar.

Estos son los estilos
Código:
<style>
.Div1 {	
	width:183px;
	height:51px;
	background-color:#000;
	border-radius:8px;
	display:none;
	color:#FFF;
	position:absolute;
}
.Div2 {	
	width:183px;
	height:51px;
	background-color:#000;
	border-radius:8px;
	display:none;
	color:#FFF;
	position:absolute;
}
.Div3 {	
	width:183px;
	height:51px;
	background-color:#000;
	border-radius:8px;
	display:none;
	color:#FFF;
	position:absolute;
}
</style>
Este es el JavaScript el archivo jquery.js lo pueden llamar de otro lado
Código:
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
 $(document).ready(function(){
	 $("#txtNombre").focus(function (){		 
		 $('.Div1').fadeIn();
	 })
	 $("#txtNombre").blur(function (){		 
		 $('.Div1').fadeOut();
	 })
	 $("#txtTelefono").focus(function (){		 
		 $('.Div2').fadeIn();
	 })
	 $("#txtTelefono").blur(function (){		 
		 $('.Div2').fadeOut();
	 })
	 $("#txtEmail").focus(function (){		 
		 $('.Div3').fadeIn();
	 })
	 $("#txtEmail").blur(function (){		 
		 $('.Div3').fadeOut();
	 })
 })
</script>
Este es el formulario
Código:
<form id="form1" name="form1" method="post" action="">
<table width="30%" align="center">
  <tr>
    <td>Nombre:</td>
    <td>
      <input type="text" name="txtNombre" id="txtNombre" /><div class="Div1">Ingres su nombre</div></td>
  </tr>
  <tr>
    <td>Telefono:</td>
    <td>
      <input type="text" name="txtTelefono" id="txtTelefono" /><div class="Div2">Ingres su telefono</div></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td>
      <input type="text" name="txtEmail" id="txtEmail" /><div class="Div3">Ingres su Email</div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="button" id="button" value="Enviar" /></td>
  </tr>
</table>
</form>
Espero que me ayuden