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> </td>
<td><input type="submit" name="button" id="button" value="Enviar" /></td>
</tr>
</table>
</form>
Espero que me ayuden