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

Por Saiyine Enviar correo el 2009-01-26 08:24:53 - Secciones: JAVASCRIPT - Enlace permanente: 859

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';">

Otras entradas de la web que podrian interesarte:

Gravatar 3118
Banderita Anonimo (2009-02-13 07:52:34)

Necesito esta misma rutina pero para excel.


saludos

Gravatar 3288
Banderita 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.

Sin gravatar 4159
Banderita Anonimo (2010-01-21 06:02:09)

:roll: :roll:

Gravatar 4702
Banderita Bertomania (2010-07-30 14:01:30)

Muchas Gracias. Sirve para Mucho!!

Gravatar 4959
Banderita 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.

Gravatar 4960
Banderita 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.

Gravatar 4961
Banderita 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.

Gravatar 4962
Banderita 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é.

Gravatar 4964
Banderita Perikksson (2010-11-30 23:14:20)

Gracias! lo probare.

Sin gravatar 5721
Banderita 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

o o o o 


Tu nombre (Nick):

Tu correo (Email):
  Necesario para tu gravatar!

Tu página (URL):

Escribe aqui tu comentario:

       :noworry: :roll: :huh: :push: :OO 8) 8O :( :) :? :D :P :o :x :| ;) ^^ xD



Vista previa activada.

Vista previa (6/6/6, 6:66)


Fondos de pantalla

. . .


Menuda oferta, ¿un pendrive Verbatim de 16Gb por solo 8,99€???

Descargas

  • ApagaPC
    apagapc241.exe  (5396)
  • LimpiaDocus
    LimpiaDocus001.exe  (4798)
  • RCM
    rcm001.zip  (4022)
  • Popmail
    popmail-0.4-psmn.tar.gz  (5452)
  • Manual de Delphi en PDF
    delphi_pdf.zip  (4772)
  • Evangelio del Perl
    Evangelio_del_perl.pdf  (5157)
  • Excel Simpsons
    Excel Simpsons  (4771)
  • . . .

    ltimos comentarios

  • 920 - Anonimo: Como los puedo cambiar desos a bolivares
  • 920 - Anonimo: 1500000
  • 920 - Anonimo: 1500000
  • 1003 - Anonimo: :OO
  • 920 - Anonimo: :huh:
  • 920 - Anonimo: :noworry:

    . . .

  • Proyectos Online

  • Saiyine Store
  • Kunowalls!!!
  • Fondos de pantalla
  • Picaday: imagenes sexys o chocantes.
  • Scarlett: fotos de Scarlett Johansson
  • WhatsmyIP: obtener tu IP pública
  • Uma Thurman: galeria de Uma Thurman
  • FunPics: imagenes graciosas
  • . . .

    Blogs

  • Por lo que más querais, no entreis a estos: Tapanez, Yhandros, Onez.

  • Otros en español: El Mundo Today, La libreta de Van Gaal, Chavalina, Kirai, Mundo Geek, Microsiervos.

  • Mis lecturas en guiri: Michael Yon, Coding Horror, YCombinator news, MySQL Performance, Slashdot.

    . . .
  • Utilidades

  •  Coral  (2336), cacheando webs
  •  Spam.la  (2864), correo de usar y tirar
  •  Mailinator  (2606), correo de usar y tirar
  •  Bug me not  (2299), absurdos registros di NO
  •  Trashmail  (2341), correo de usar y tirar

    . . .

  • Busquedas


    Varios ejemplos de lo que buscaban visitantes recientes:

    . . .

    Página web ©2001-2011 Saiyine descargada en s, con 7581267 visitas en total, hoy (de un total de 0 previstas).

    . . .