Código para que al pasar el mouse por una imagen salga un texto

Jask · #1 (**permalink**) 02/11/2009, 16:54

Muy buenas a todos :) que tal ?

Hace tiempo me puse con javascript pero la verdad que ahora mismo estoy muy verde.. demasiado xD !! pero bueno.. A ver si me pongo de nuevo en cuanto pueda.

Lo que quiero es saber si existe algún código para que, por ejemplo, tengo una imagen de un interrogante al lado de una caja de texto y al pasar el mouse por la imagen salga una pequeña ventanita al lado que diga lo que hay que introducir en la caja de texto, no se si me expliqué bien :) si no díganmelo y me explayo mejor !

Un saludo y muchas gracias por todo !!

Juanillloo · #2 (**permalink**) 02/11/2009, 17:02

Nose si lo que buscas es algo más simple a quí te pongo la forma de ponerlo presonalizado, a eso se le llama tooltip.

http://dudasweb.blogspot.com/2009/05...avascript.html

kuriel · #3 (**permalink**) 02/11/2009, 17:13

Mira, hice un ejemplo para que veas que con Simple HTML sin JavaScript se puede hacer:

Cita:

Pruebalo, esta muy bueno jeje...

Jask · #4 (**permalink**) 02/11/2009, 17:31

Muchas gracias a los dos.
El primero no se porqué no me ha funcionado lo he colocado bien y nada :S !!

Y el segundo está muy bien pero tené en cuenta que la imagen que tengo de HELP es de 12x12 píxeles más o menos, tendría que salir de la caja y aparecer ahí, como el tutorial de Mostrar/Ocultar capas pero en vez que sea un enlace de texto que sea una imagen y que aparezca al pasar el mouse.

http://www.forosdelweb.com/wiki/Mostrar/ocultar_capas
Ese es el tuto que comenté jejeje

GRacias a los 2

kuriel · #5 (**permalink**) 02/11/2009, 18:23

YO escribí que HICE UN EJEMPLO.

Es para que lo tomes como referencia, y también para que se vea que se puede sin JavaScript...

Saludos!!

Jask · #6 (**permalink**) 02/11/2009, 19:37

Cita:

Iniciado por kuriel

YO escribí que HICE UN EJEMPLO.

Es para que lo tomes como referencia, y también para que se vea que se puede sin JavaScript...

Saludos!!

Si si y te lo agradezco jajaj por lo tanto tendré que ver como lo implemento xD !!

Gracias :)

Jask · #7 (**permalink**) 03/11/2009, 07:00

Vale ya conseguí lo que quería gracias a Kuriel :) te lo agradezco macho.

Dejo el código por si alguien lo quiere probar:

Código:

<html>
<head>
 <title>Ejemplos de estilo en enlaces</title>
 <STYLE type="text/css">
#PunteroAqui:hover{ width:230px; height:40px; position:absolute;}
#PunteroAqui{
	width:16px; 
	height:16px; 
	overflow:hidden; 
	position:absolute; 

	}
 </STYLE>
</head>

<body>

Pase el mouse por el interrogante 
<span id="PunteroAqui">
<img src="http://img29.imageshack.us/img29/4753/helpsk.png">
- Texto de ayuda

</span> 
<p>


</body>
</html>

kuriel · #8 (**permalink**) 06/11/2009, 19:02

Cita:

Iniciado por Jask

Vale ya conseguí lo que quería gracias a Kuriel :) te lo agradezco macho.

Dejo el código por si alguien lo quiere probar:

Código:

<html>
<head>
 <title>Ejemplos de estilo en enlaces</title>
 <STYLE type="text/css">
#PunteroAqui:hover{ width:230px; height:40px; position:absolute;}
#PunteroAqui{
	width:16px; 
	height:16px; 
	overflow:hidden; 
	position:absolute; 

	}
 </STYLE>
</head>

<body>

Pase el mouse por el interrogante 
<span id="PunteroAqui">
<img src="http://img29.imageshack.us/img29/4753/helpsk.png">
- Texto de ayuda

</span> 
<p>


</body>
</html>

Que bueno que te sirvió, por cierto, ha quedado muy bien y sin JavaScript.

Saludos.

Jask · #9 (**permalink**) 07/11/2009, 09:08

Muchas gracias a vos Kuriel, sin lo que me pasaste no lo podría haber hecho jeje :)

Un saludo !!