[SOLUCIONADO] Hover con text

[alexjacome_]

Hola que tal tengo un peque problema y es que tengo que hacer un hover sobre una imagen y que una vez que aparezca el hover dentro de esté me tiene q aparecer un recuadro de text donde se va a poder llenar un campo con un X correo electronico, practicamente como un formulario al cual el visitante lo llena pero ademas de que mientras se llena este campo y siempre y cuando el mouse se encuentre sobre la imagen que el hover no desaparezca....

Llevo ya algun tiempo tratando de lograr esto pero no tengo idea de como hacerlo...

Espero haberme echo entender y sobre todo espero que me puean dar una mano con esto por fa...

muchas gracias de antemano..

[Bultack]

Me estoy imaginando cómo es la página que tienes.

Tienes una imagen en una página y un input text oculto, el input text debe mostrarse cuando el usuario tiene el icono del ratón encima de la imagen. ¿Si el usuario quita el icono del ratón de la imagen desaparecerá el input text? Si es así, la única opción que se me ocurre para que el usuario pueda escribir en el input text sin tener que mover el ratón es accediendo a dicho input mediante la tecla tabulador o utilizando el atributo focus de la etiqueta input.

De todas formas para conseguir esto creo que lo mejor sería utilizar jQuery:

Código:

$(document).ready( function() {
	$(".inputText").css('display','none'); //Ocultamos el input text cuando cargue la página	
	
	$("img").mouseenter(function() {
		$(".inputText").show('show');
	}); //Mostramos input text cunado el ratón está sobre la imagen
	
	$("h1").mouseleave( function(){
		$(".inputText").hide('slow');

	});//Ocultamos input text cuando el ratón se quita de la imagen
});

A todo esto, tendrás que añadir la librería jQuery a tu página.

[alexjacome_]

Si exactamente es eso lo que necesito hacer.

Aunq no entiendo bien como utilizar el codigo que me muestras, por que habia olvidado comentar que a la imagen la tengo dentro de un div en una colspan especifico, y hasta donde tengo, el input text no desparece al quitar el mouse, y asi no me sirve.

Por otro lado el jQuery que me dices me parece q hay varios cierto?
Cual es la libreria especifica que deberia tener para poder cumplir con esto???

Disculpa si soy un poquito molesto pero la verdad soy un poco novato en esto jeje

con todo muchas gracias por la ayuda anterior Bultack

[Bultack]

Si pudieses facilitar algo del código que tienes sería más fácil poder ayudarte

[alexjacome_]

Pues si tienes razon...

Mira aquí esta exactamente el código de la sección que necesito modificar,
-Lo que quiero q aparezca y desaparezca es el input type text, no se que tengo que aumentar mover o cambiar....


<tr>
<td colspan="8">
<div id="sign me up" >
<input type="text" size="29" value="Enter your e-mail address" name="nombre2" style="position:absolute; margin-top:167; margin-left: 19; height:32; ">

<a href="#" style="text-decoration:none;">
<img id='register' src="images/register image.jpg" width="244" height="245"alt="" usemap="#register"
onMouseOver="onHover2();"

onMouseOut="offHover2();" /></a>

</div>


<script>
function onHover2()
{

$("#register").attr('src', 'images/register image-hover.jpg');
}

function offHover2()
{
$("#register").attr('src', 'images/register image.jpg');
}
</script>

<map id="register" name="register">
<area shape="rect" alt="Enter your e-mail address" title="Enter your e-mail address" coords="11,160,225,205"
target="_blank" onMouseOver="onHover2()" />
</map>

</td>

<td><img src="images/spacer.gif" width="1" height="245" alt=""></td>
</tr>

[pzin]

Aunque yo lo veo como una pequeña aberración, ya que no es algo que choca un poco con las normas de la usabilidad, en realidad no hace falta usar JavaScript ya que con CSS bastaría.

Teniendo algo así:

Código HTML:

<div id="registro">
  <img src="">
  <form>
    <input ...>
  </form>
</div>
 

Luego puedes usar :hover para ocultar o las cosas.

Código CSS:

div#registro {
  display: inline; /* para div por defecto es block, que para el caso no interesa */
}
 
div#registro form {
  display: hidden;
}
 
div#registro:hover form {
  display: block;
}
 

[alexjacome_]

Hola q tal....

Gracias por la ayuda, pero creo que ya lo soluciones, quiza no sea muy ortodoxa la forma en la se resolvio y como dice pzin parezca una pequeña aberracion, ya me sirvio y fin de cuentas eso es lo importante creo jejeje bueno mas o menos es asi como se soluciono partiendo del codigo que ya tenia...

Código HTML:

<td colspan="8">
        <div id="sign me up" >  
	   
        <img id='register' src="images/register image.jpg" width="244" height="245"alt="" usemap="#register" 
        onMouseOver="onHover2();"        
        onMouseOut="offHover2();" />      
	  </div>
            
	<script>
		function onHover2()
		{
			
			$("#register").attr('src', 'images/registe image-hover.jpg');
			$("#textMessages").show();
		}
		
		function offHover2()
		{
			$("#register").attr('src', 'images/register image.jpg');
			$("#textMessages").hide();
		}
    </script>
    	
         <div id="textMessages" style="position:absolute;display:none; z-index:10;  margin-top:-245px;" onMouseOver="onHover();">
            <input type="text" size="29"  value="Enter your e-mail address" name="nombre2"
             style="position:absolute; margin-top:167; margin-left: 19; height:32; ">
	    </div>
		 <map id="register" name="register">
             <area shape="rect" alt="Enter your e-mail address" title="Enter your e-mail address" coords="11,160,225,205"
             target="_blank" onMouseOver="onHover2()" />  
         </map>
           
      </td> 

lo que hicimos fue aumentar:

$("#textMessages").show(); y $("#textMessages").hide();

dentro de onHover y offHover respectivamente

y aumentar un div:

<div id="textMessages" style="position:absolute;display:none; z-index:10; margin-top:-245px;" onMouseOver="onHover();">

y dentro del cual esta el input text....

Lo que no me gusto mucho es que para colocar esto, eh tenido que usar coordenadas para poder hubicar correctamente el text....

Pero en todo caso ya funcione jeje

Muchas gracias de todas formas...