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

Javascript - Efecto ola sobre texto al pasar el mouse

Códigos Javascript

Este divertido script consigue un efecto sobre un texto, efecto ola, al pasar el mouse o raton por encima - onmouseover
Visitas: 34,364 - 27/12/2003 23:31:08
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Debemos modificar la linea 1 con el texto que queremos mostrar
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. <script LANGUAGE="JavaScript">
  2. text = "Tutores.org  "
  3. maximo = 50
  4. minimo = 10
  5. function initEffetLoupe(obj) {
  6.   document.getElementById(obj).innerHTML = "<TABLE><TR onMouseOver=effetLoupe('"+obj+"')><TD>" + text + "</TD></TR></TABLE>"
  7. }
  8. function effetLoupe(obj) {
  9.   aff = ""
  10.   increment = (maximo-minimo)/(text.length/2)
  11.   pos = 0
  12.   taille = minimo
  13. for(a=0; a<text.length; a++) {
  14.     lettre = text.charAt(a)
  15.     if (pos+minimo >= maximo) { increment = -increment }
  16.     pos += increment
  17.     taille = minimo + pos
  18.     aff += "<TD><FONT style='font-size:" + taille + "'>"+lettre+"</FONT></TD>"
  19.   }
  20. document.getElementById(obj).innerHTML = "<TABLE><TR onMouseOut=initEffetLoupe('"+obj+"')>" + aff + "</TR></TABLE>"
  21. }
  22. </script>
  23. <DIV ID="txt1" >-</DIV>
  24. <script LANGUAGE="javascript">
  25.   initEffetLoupe("txt1")
  26. </script>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto ola sobre texto al pasar el mouse " href="http://www.tutores.org/codigo/929/" target="_blank">Efecto ola sobre texto al pasar el mouse </a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
04-10-2007 16:42:36
5 5
hola!
es muy bonito el codigo pero a mi no me funciona,no me podeis decir paso a paso que debo hacer?

gracias!!
Comentario usuario
Maurivi
4 5
Muchos de estos codigos javascript solo funcionan en Internet explorer y varian segun la version.
Saludos
Comentario usuario
anapek
1 5
Hola mi nombre es ana y tengo el siguiente problema que nose como solucionar al pasar el mouse sobre la pag explorer o lecturas me hace un efecto ola y no me permite pasar tranquila la barrita hacia arriba o hacia bajo por favor si alguien me puede ayudar con esto .....tambien aclaro que se muy poco sobre la pc a lo cúal necesitaria algo de paciencia .un beso ana =)
Comentario usuario
Joseman
5 5
Pues yo uso IE 9 y el código éste no hace ni fú.
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.