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 - Multinotas en texto y enlaces

Códigos Dhtml

Usando Javascript y Css el codigo consigue mostrar diferentes notas tipo " Alt " pudiendo configurarse el estilo, asi como colores, tipo de letra etc... y poder aplicar una nota distinta a cada parte del texto.
Visitas: 24,174 - 30/06/2005 22:32:42
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Si teneis dudas con el funcionamiento de este codigo, exponedlo en un comentario.
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. <html>
  2. <head>
  3. <title>Notas multiples</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <script language="javascript">
  6. creamos_notas=function(){
  7. mostramos_nota=function(){
  8.                         var id=this.id.replace(/a/,'nota');
  9.                         nota=document.getElementById(id);
  10.                         nota.style.left=event.clientX;
  11.                         nota.style.top=event.clientY;
  12.                         nota.style.visibility='visible';
  13.             }
  14.   esconde_nota=function(){
  15.                         var id=this.id.replace(/a/,'nota');
  16.                         nota=document.getElementById(id);
  17.                         nota.style.visibility='hidden';
  18.             }
  19.             as=document.getElementsByTagName('a');
  20.             for(i=0;i<as.length;i++){
  21.                        if(/mi_estilo/.test(as[i].className)){
  22.                                    as[i].onmousemove=mostramos_nota;
  23.                                    as[i].onmouseout=esconde_nota;
  24.                        }
  25.            }
  26. }
  27. window.onload=creamos_notas;
  28. </script>
  29. <style type="text/css">
  30. p {
  31.             font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
  32.             color: #333333;
  33. }
  34. a.mi_estilo:link,a.mi_estilo:visited {
  35.             font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
  36.             color: #00f;
  37.             text-decoration: underline;
  38. }
  39.  
  40. a.mi_estilo:hover {
  41.             color: #f00;
  42. }
  43. .nota {
  44.             position: absolute;
  45.             top: 0px;
  46.             left: 0px;
  47.             background: #ffc;
  48.             padding: 10px;
  49.             border: 1px solid #000;
  50.             z-index: 1;
  51.             visibility: hidden;
  52.             font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
  53.             color: #000;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <p>Visita, <a href="http://www.tutores.org" id="a0" class="mi_estilo">Tutores.org</a> web de <a href="#" id="a1" class="mi_estilo">webmasters</a> para webmasters.</p>
  59. <div id="nota0" class="nota">Ir a página Inicial</div>
  60. <div id="nota1" class="nota">Ver descripción de Webmasters</div>
  61. <p>Encontrarás <a href="#" id="a2" class="mi_estilo">Códigos</a>, <a href="#" id="a3" class="mi_estilo">Tutoriales</a>, Etc.</p>
  62. <div id="nota2" class="nota">Codigo Fuente</div>
  63. <div id="nota3" class="nota">Tutoriales sobre tu Lenguaje de Programación</div>
  64. </body>
  65. </html>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Multinotas en texto y enlaces" href="http://www.tutores.org/codigo/1482/" target="_blank">Multinotas en texto y enlaces</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Aun no existe ningun comentario para este Codigo.
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.