SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Dhtml
Code

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.
Visitas: 45,158 - 19/05/2004 21:56:47
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


<!-- Codigo ofrecido por Tutores.org -->

  1. <HEAD>
  2. <style>
  3. #ejemplo1 {
  4. position:absolute;
  5. width:150px;
  6. height:100px;
  7. color:blue;
  8. background-color:#ff9999;
  9. text-align:center;
  10. visibility:hidden;
  11. z-index:10;
  12. }
  13. #ejemplo2 {
  14. position:absolute;
  15. width:150px;
  16. height:100px;
  17. color:blue;
  18. background-color:#FDF5E6;
  19. text-align:center;
  20. visibility:hidden;
  21. z-index:10;
  22. }
  23. </style>
  24. <SCRIPT LANGUAGE="JavaScript">
  25. function ver_ejemplo(user,ValueShow) {
  26. var mousex = window.event.x;  
  27. var mousey = window.event.y;  
  28. user.style.visibility = ValueShow;
  29. user.style.left = mousex + 5;  
  30. user.style.top = mousey;
  31. }
  32. </script>
  33. </HEAD>
  34. <BODY>
  35. <br>
  36. <font color="red">
  37. <a onmouseover="ver_ejemplo(ejemplo1,'visible')" onmouseout="ver_ejemplo(ejemplo1,'hidden')">
  38. Ejemplo 1
  39. </a>
  40. <br><br>
  41. <a onmouseover="ver_ejemplo(ejemplo2,'visible')" onmouseout="ver_ejemplo(ejemplo2,'hidden')">
  42. Ejemplo 2
  43. </a>
  44. <div id="ejemplo1">
  45. <table border="no"  width="148">
  46. <tr valign="middle">
  47.       <td height="98" align="center"><font color=#990000> Primer ejemplo<br>
  48.         tutores.org<br>
  49.         <br>
  50. Anuncio </font>
  51. </td></tr></table>
  52. </div>
  53. <div id="ejemplo2">
  54. <table border="yes" bordercolor="#cc0000" width="148">
  55. <tr valign="middle">
  56.       <td height="98" align="center"><font color=Blue> Segundo ejemplo<br>
  57.         Anuncio<br>
  58.         <br>
  59.         Tutores.org<br>
  60. </font>
  61. </td></tr></table>
  62. </div>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<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>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
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
27-01-2009 19:37:58
4 5
Muy bueno, pero quisiera saber porque en firefox no funciona...
Comentario usuario
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
Sara
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
jasa12
2 5
Muy muy bueno, pero ¿cómo se podría hacer para que funcione en Firefox?
Muchas gracias
Comentario usuario
jasa12
4 5
Si no funciona en Firefox...NO SIRVE!
Comentario usuario
gines
4 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.