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 - Cambio de imagen al pasar el mouse - onmouseover

Códigos Javascript

Cuando queremos mostrar un boton el cual modifique la imagen al pasar el mouse por encima o " onmouseover ". Simplemente tenemos que modificar la linea 24 en donde aparecen el path hacia las imagenes o bien podremos agregar mas.
Visitas: 94,201 - 17/06/2004 0:15:59
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. <SCRIPT LANGUAGE="JavaScript">
  3. function cambiar (flag,img) {
  4.    if (document.images) {
  5.         if (document.images[img].permitirloaded) {
  6.             if (flag==1) document.images[img].src = document.images[img].permitir.src
  7.             else document.images[img].src = document.images[img].permitir.oldsrc
  8.         }
  9.    }
  10. }
  11. function preloadcambiar (img,adresse) {
  12.    if (document.images) {
  13.         img.onload = null;
  14.         img.permitir = new Image ();
  15.         img.permitir.oldsrc = img.src;
  16.         img.permitir.src = adresse;
  17.         img.permitirloaded = true;
  18.    }
  19. }
  20. </SCRIPT>
  21. </head>
  22. <body>
  23. <A HREF="http://www.tutores.org/" TARGET="_BLANK" onMouseover="cambiar(1,'IMG1');" onMouseout="cambiar(0,'IMG1');">
  24. <IMG SRC="/tutores/images/mundo.gif" border=0 NAME="IMG1" onLoad="preloadcambiar(this,'/tutores/images/mundo2.gif');" ></A>
  25. </body>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Cambio de imagen al pasar el mouse - onmouseover" href="http://www.tutores.org/codigo/1130/" target="_blank">Cambio de imagen al pasar el mouse - onmouseover</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Rosett
1 5
muchas gracias!!!!!!!

me sirvio mucho ^^
Comentario usuario
08-12-2012 20:48:48
4 5
CHE NO SE DONDE PONGO LA PAGINA DE MI IMAGENNN EN QUE PARTE???
Comentario usuario
Eul3r
4 5
Buen codigo, ya lo probé y si corre perfectamente en Firefox, lo mejor de todo es que permite el preload de la imagen a mostrar en el mouseover!, gracias y saludos!.
Comentario usuario
aeepa
3 5
gracias!!!
es lo que estava buscando XD
Es muu facil de usar
Comentario usuario
piul
1 5
buen codigo, buena pagina muy buena.228E
Comentario usuario
14-08-2008 01:54:14
1 5
Hola me puedes decir como hago para hacer en varias imagenes
Comentario usuario
10-12-2008 13:45:41
5 5
Con el permiso del webmaster opino que el codigo se puede hacer mucho mas corto con el mismo resultado:

Enlace a la pagina:
desarrolloweb.com/articulos/2.php

Enlace de descarga del codigo:
desarrolloweb.com/articulos/reportajes/archivos/zips/rollover.zip
Comentario usuario
DarkLady
3 5
Wow, increíble de verdad, era justo lo que estaba buscando y visité varias webs, pero sólo aquí solucionaron mi conflicto, el código está muy sencillo de utilizar y super práctico, mil gracias ^^
Comentario usuario
Sin definir
4 5
muchas gracias!!!, muy bueno,, me sirvió muchísimo.
gracias de verdad
Comentario usuario
13-10-2009 17:22:00
5 5
Pero apartir de donde se pone ese código??
De antemano MIL GRACIAS
Comentario usuario
Gmo.-
1 5
Estupendo viejo!... funciona de maravilla....
Comprobado en FF, Chrome y IE

Gracias por el dato!
Comentario usuario
06-02-2010 00:45:33
4 5
Gracias es justo lo que andaba buscando..
lo voy a probar
Comentario usuario
omel
4 5
Me sirve! pero cuando uso mas d una imagen la unica que me cambia es la primera, que debo hacer para me cambien todas?
Comentario usuario
05-11-2010 15:45:34
1 5
Hola! MUCHÍSIMAS GRACIAS, ME SALVASTE LA VIDA.
Comentario usuario
TUeget
3 5
Muchas gracias,,,,, de veras me ayudo mucho
Comentario usuario
el
5 5
casi no le entiendo a java, no sabras como se hace en C#. :)
Comentario usuario
02-12-2007 19:16:15
2 5
Excelente ejemplo el de RafaelFM, me funciono perfecto y es parte de mis rutinas, Saludos
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.