Dhtml - Ventana con info al pasar el raton sobre texto

Códigos Dhtml

Al pasar el mouse o raton sobre un texto se muestra una ventana ( layer ) con el contenido o descripcion que hayamos indicado, imitando a " ALT " de las imagenes. Muy bueno para mostrar información sobre textos, enlaces, o incluso imagenes.

Tutores.org

Inicio > Dhtml

Visitas: 46,720 - 19/05/2004 21:56:47

CODIGO

Este codigo aun no ha sido probado por Tutores.org en Opera

Este codigo aun no ha sido probado por Tutores.org en Safari

<HEAD>
<style>
#ejemplo1 {
position:absolute;
width:150px;
height:100px;
color:blue;
background-color:#ff9999;
text-align:center;
visibility:hidden;
z-index:10;
}
#ejemplo2 {
position:absolute;
width:150px;
height:100px;
color:blue;
background-color:#FDF5E6;
text-align:center;
visibility:hidden;
z-index:10;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function ver_ejemplo(user,ValueShow) {
var mousex = window.event.x;
var mousey = window.event.y;
user.style.visibility = ValueShow;
user.style.left = mousex + 5;
user.style.top = mousey;
}
</script>
</HEAD>
<BODY>
<br>
<font color="red">
<a onmouseover="ver_ejemplo(ejemplo1,'visible')" onmouseout="ver_ejemplo(ejemplo1,'hidden')">
Ejemplo 1
</a>
<br><br>
<a onmouseover="ver_ejemplo(ejemplo2,'visible')" onmouseout="ver_ejemplo(ejemplo2,'hidden')">
Ejemplo 2
</a>
<div id="ejemplo1">
<table border="no" width="148">
<tr valign="middle">
<td height="98" align="center"><font color=#990000> Primer ejemplo<br>
tutores.org<br>
<br>
Anuncio </font>
</td></tr></table>
</div>
<div id="ejemplo2">
<table border="yes" bordercolor="#cc0000" width="148">
<tr valign="middle">
<td height="98" align="center"><font color=Blue> Segundo ejemplo<br>
Anuncio<br>
<br>
Tutores.org<br>
</font>
</td></tr></table>
</div>

ENLACE AL CODIGO

Si quieres enlazar desde tu pagina a este codigo

<a title="Tutores.org - Ventana con info al pasar el raton sobre texto" href="http://www.tutores.org/codigo/1098/" target="_blank">Ventana con info al pasar el raton sobre texto</a>

COMENTARIOS

Comentario usuario

Vlady 25-11-2007 15:11:46

5 5

muy bueno a mi me sirve pero no displaya en firefox solo en IE eso es un problema espero se soluciones bye salu2

Comentario usuario

Johan 27-01-2009 19:37:58

4 5

Muy bueno, pero quisiera saber porque en firefox no funciona...

Comentario usuario

sergio 06/07/2004 17.04.57

5 5

hola
muy bueno
lo he probado y tengo 2 dudas
como hago para que en vez del cuadro de ejemplo salga una imagen que tengo en mi disco duro
y la mas importante para mi,como se hace para las diferentes imagenes salgan en las mismas cordeenadas,o sea sin varia de ubicacion en la pantalla
un ejemplo de lo que quiero lograr esta en ponsa.es
muchas gracias

Comentario usuario

SaraSara

5 5

Hola

Muy bueno, pero quisiera saber si existe la forma de que el texto que se muestra en el div fuera dinámico y cómo se podría hacer eso?

Saludos y gracias

Comentario usuario

jasa12jasa12

1 5

Muy muy bueno, pero ¿cómo se podría hacer para que funcione en Firefox?
Muchas gracias

Comentario usuario

jasa12jasa12

3 5

Si no funciona en Firefox...NO SIRVE!

Comentario usuario

ginesgines

1 5

Esto lo puedes hacer fácilmente con la etiqueta acronym usando solo html, no hace falta jquery

Puedes ver un ejemplo en esta página acortar.tk poniendo el ratón encima de los cuadros de texto o en algún enlace. y si quieres ver como lo realizan solo tienes que pinchar con el botón derecho del ratón y en "ver codigo fuente".

Con jquery los cuadros emergentes puedes hacerlos mas bonitos pero esto es menos complicado si no quieres liarte mucho.

INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
	Codigo Seguridad
	Antes de enviar un comentario... Todos los comentarios son revisados personalmente Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado Usuarios registrados tienen preferencia en recibir respuestas de ayuda!! Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor. Por favor, insertar los comentarios descriptivos.