Cambiar una imagen al pasar un ratón por encima en Javascript

Este es un truco bastante sencillo, pero que puede usarse para efectos muy interesantes, como los típicos botones difuminados que se definen al pasar el ratón por encima, o el ya clásico de la hilera de iconos que el icono que tiene el puntero de ratón encima es mayor que los demás.

    

El código, muy simple, seria algo como:

<img src="imagen1.jpg"
                id="img"
                onmouseover="img.src='imagen2.jpg'"
                onmouseout="img.src='imagen1.jpg';">

Compartelo: Google+ . twitter . Facebook


Anonimo
Anonimo
2009-02-13 07:52:34


Necesito esta misma rutina pero para excel.


saludos


Skata
Skata
2009-04-13 07:40:56


Gracias por la info, ahbia encontrado varias pero no me funcionaban, la tuya es mas practica y me funciono a la primera.


Anonimo
Anonimo
2010-01-21 06:02:09


:roll: :roll:


Bertomania
Bertomania
2010-07-30 14:01:30


Muchas Gracias. Sirve para Mucho!!


Perikksson
Perikksson
2010-11-30 01:30:02


Si no es mucha molestia, como se podria hacer para que cambiara a varias imagenes?, es decir, en mi web, mediate imagenes, enlazo el video correspondiente, y quiero que cuando se pase el raton por encima de la imagen, se vean varias imagenes correspondientes al video para que el usuario se haga una idea de que va el video.

Gracias de antemano y un saludo.


Perikksson
Perikksson
2010-11-30 01:30:40


Si no es mucha molestia, como se podria hacer para que cambiara a varias imagenes?, es decir, en mi web, mediate imagenes, enlazo el video correspondiente, y quiero que cuando se pase el raton por encima de la imagen, se vean varias imagenes correspondientes al video para que el usuario se haga una idea de que va el video.

Gracias de antemano y un saludo.


Saiyine
Saiyine
2010-11-30 13:19:08


Para varias imagenes se complica bastante, te lo puedo mirar esta noche.

Se me ocurre que quizás tengas un problema por el tiempo que tardan las imagenes en cargarse, que ya solo con un par como las de este ejemplo se nota algo.


Saiyine
Saiyine
2010-11-30 13:25:56


Mira, una idea, la mejor solución, de largo, es usar un gif animado para la secuencia de imagenes, y utilizar el ejemplo que os pongo.

Con javascript e imagenes normales va a usar muchisima más CPU. Aun así, lo pensaré.


Perikksson
Perikksson
2010-11-30 23:14:20


Gracias! lo probare.


Gabriel
Gabriel
2012-06-03 19:29:18


Muy agradecido por su post, en especial este, ya que solucioné el problema de la imagen; estuve probando de otros y de muchos no funcionan.
Gabriel


Comentarios de calidad

Tus datos no serán publicados, salvo que llegue una buena oferta. Si tienes un gravatar, puedes poner tu correo en Contacto y funcionará. O no. Posiblemente si.


< Mapas de estrategias en Goal United | Cambiar IP en Windows desde la linea de comandos >