Imagen que cambia al pasar el mouse (script)

24 de abril de 2009 55 comentarios ,
Con un pequeño script podemos hacer cambiar una imagen por otra al pasar el cursor sobre ella, esto le agrega mayor dinamismo a nuestro blog. Sólo necesitamos tener dos imágenes del mismo tamaño y este código que les daré a continuación.

Vamos a Diseño | Añadir un gadget | HTML/Javascript y pegamos lo siguiente:
<script>
function cambiar (flag,img) {
if (document.images) {
if (document.images[img].permitirloaded) {
if (flag==1) document.images[img].src = document.images[img].permitir.src
else document.images[img].src = document.images[img].permitir.oldsrc
}}}
function preloadcambiar (img,adresse) {
if (document.images) {
img.onload = null;
img.permitir = new Image ();
img.permitir.oldsrc = img.src;
img.permitir.src = adresse;
img.permitirloaded = true;
}}
</script>

<a onmouseover="cambiar(1,'IMG1');" onmouseout="cambiar(0,'IMG1');" href="URL del enlace">
<img border="0" src="URL de la imagen UNO" onload="preloadcambiar(this,'URL de la imagen DOS');" name="IMG1"/></a>

Deben cambiar los datos en rojo por los suyos, guardan los cambios y listo. Tendrán una imagen dinámica sin necesidad de tocar la plantilla. Pueden ver un ejemplo en la foto de mi perfil aquí.






55 comentarios en:

" Imagen que cambia al pasar el mouse (script) "

  1. Exelente! no sabia que se podía hacer eso. Simpre sorprendiéndome en tu blog. jaja.

    Saludos.

    ResponderEliminar
  2. Todo sea en pro de mejorar nuestro blog.
    Un abrazo.

    ResponderEliminar
  3. Para tener dos ó más gadget con este script, ¿Que hay que modificar en él?...
    Saludos.
    Jpz.-

    ResponderEliminar
  4. Hola Jpz,

    Sólo pega en otro elemento HTML/Javascript esta parte:

    <a onmouseover="cambiar(1,'IMG1');" onmouseout="cambiar(0,'IMG1');" href="URL del enlace">
    <img border="0" src="URL de la imagen UNO" onload="preloadcambiar(this,'URL de la imagen DOS');" name="IMG1"/></a>

    y modifica donde dice IMG1 (aparece 3 veces) lo cambias por IMG2. Si quisieras agregar otro elemento haces lo mismo cambiándolo por IMG3 y así sucesivamente.
    Como ves, no necesitas pegar de nuevo el script, únicamente la última parte que te he dicho.

    Saludos.

    ResponderEliminar
  5. Extraordinario Potro.
    Genial!.
    Saludos y gracias.
    Jpz.-

    ResponderEliminar
  6. hola a mi no me funciono, por alguna extraña razon la segunda imagen no me aparece y ya verifique la url de la imagen, la cambie por otra y no me funciona si em pueden ayudar les agradezco

    ResponderEliminar
  7. Hola Jpz,

    Me alegra que estés contento con los resultados, en estos días publico una forma más sencilla para lograr el mismo efecto.
    Saludos.


    Hola Hugo Daniel,

    Sin saber la dirección de tu blog no podría saber cuál es el problema.
    Saludos.

    ResponderEliminar
  8. Hola!! que tal a todos!! la verdad cai de casualidad en este Sitio y les quiero agradecer porque todo el materia expuesto, funciona, y lo mejor de todo que esta explicado de una manera "Clara" y "Sencilla".

    Gracias por la ayuda!!

    Un fuerte abrazo a todos los que hacen posible este sitio!!

    Saludos!!

    ...

    ResponderEliminar
  9. Hola LU7EGC,

    Muchas gracias por tus comentarios y bienvenido a Ciudad Blogger!

    Saludos.

    ResponderEliminar
  10. Como se puede cambiar el tamaño de la foto del perfil en blogger?.
    Espero que alguien pueda ayudarme.

    ResponderEliminar
  11. Sólo sube una foto más grande.
    Saludos.

    ResponderEliminar
  12. Gracias ante todo.
    ¿Cómo cambiaría el tipo de letra en el pié de foto? Qué script o tag debería añadir para poner, por ejemplo, el tipo calibri
    Gracias

    ResponderEliminar
  13. Hola alejandro,

    El pié de foto iría así:

    <div style="font-family: Verdana;">Aquí va el texto</div>

    Cambia donde dice Verdana por el tipo de letra que quieras, sólo recuerda que las fuentes permitidas son:
    Arial, Times New Roman, Verdana, Georgia, Comic Sans, Trebuchet y Courier New.

    Saludos.

    ResponderEliminar
  14. olle y al pasar hacer el efecto que pasa es tus textos
    como lo hacemos a y tambien los efectos de donde esta lo twitter tambn se ven buenos espero me puedas ayudar y pasarme los codigos que andes muy bn

    ResponderEliminar
  15. Para personalizar los lins del blog visita esta entrada, ahí verás cómo se cambia el color y otras cositas.
    De Twitter no sé exactamente a qué te refieres, pero en sí es un menú vertical, puedes cómo se hace aquí.

    Saludos.

    ResponderEliminar
  16. exelente potro, te invito a esta pagina que estoy haciendo agregando varias cosas de ciudad blogger mas que todo wow esa de la imagen me quedo muy buena www.atlantistv.blogspto.com

    ResponderEliminar
  17. hola :3 sera posible que envez de cambiar de imagen al pasar el mouse, muestre una imagen al lado de un enlace al pasar el mouse sobre ese enlace? seria muy interesante y de mucha ayuda :)

    ResponderEliminar
  18. Pues quizá la forma más simple sería con un Tooltip.

    ResponderEliminar
  19. Hola Potro,
    Te queria comentar algo. Al hacer click sobre mi nombre y mi ciudad en el perfil de mi blog, no ocurre nada. Sin embargo, cuando hago click en donde dice "Ver todo mi perfil", esta frase se subraya y me enlaza con la pagina del perfil.
    Como puedo hacer para que al pasar el mouse sobre mi nombre y ciudad, ocurra lo mismo que con "ver todo mi perfil"?..
    Muchisimas Gracias y un saludo,
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  20. Hola Jose,

    Probablemente hayas editado alguna parte de ese código sin darte cuenta.
    Prueba eliminando el gadget y poniéndolo de nuevo para ver si se corrige el problema.

    Saludos!

    ResponderEliminar
  21. Hola Potro,
    Ha funcionado a la perfeccion!..
    No sabes como te lo agradezco!... y la de horas que he pasado modificando el HTML tratando de buscar un enlace para el perfil...
    Eres maravilloso, Potro.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  22. A veces la solución más simple es la más efectiva ;)
    ¡Saludos!

    ResponderEliminar
  23. Hola Potro,
    Ahora me pasa esto con mi segundo blog.
    Es relacionado con el perfil, concretamente con estos dos aspectos:
    1): Mi nombre y apellidos
    2): "ver todo mi perfil".
    Ambos se subrayan cuando paso el mouse por arriba. Hasta ahi todo bien, pero cuando hago click para ver mi perfil y luego regreso a la pagina principal, si paso el cursor sobre el nombre o "ver todo mi perfil", ya no se subraya.
    Unicamente lo hace si hago un click en cualquier lado de la pantalla.
    Hay alguna posibilidad para que el sistema genere ese click y por consiguiente aparezca subrayado al pasar el cursor?..
    O tendria que cambiar algo en el HTML?>.
    Esto no me pasa en el otro blog y tengo lo mismo en ambos!>.. Que raro me resulta y contradictorio al mismo tiempo!.
    A ver si me arrojas luz en esto.
    Saludos cordiales,
    Tu seguidor fiel,
    jose

    ResponderEliminar
  24. Hola Jose,

    Seguro los estilos de los links son diferentes ahí, necesitaría saber cuál es el blog para decirte cómo arreglarlo.

    Saludos.

    ResponderEliminar
  25. Hola Potro,
    El blog es www.destinoviajes.blogspot.com
    Es el blog que tengo de prueba donde hago y deshago, para aprender.
    He mirado los estilos de link y no se francamente que debo de añadir o eliminar.
    Saludos y muchas gracias
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  26. Pues acabo de entrar a ese blog pasé el cursor por esos links y se subraya, luego di click ahí para ver tu perfil, regresé de nuevo al blog, pasé otra vez el cursor por esos links y sigo viendo el subrayado de forma normal :/

    ResponderEliminar
  27. Hola Potro,
    Tengo una pregunta y perdona las molestias.
    Yo tengo 2 blogs entrelazados. Es posible cambiar la foto del perfil de uno de ellos sin que se cambie la del otro?>
    Lo he intentado hacer y no me sale.
    Muchas gracias.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  28. No, aunque tengas x cantidad de blogs la cuenta sigue siendo una y el perfil es el perfil de la cuenta no de los blogs. Si abres otra cuenta para otro blog ahí sí podrías cambiar el perfil pues ya es una cuenta distinta ;)

    ResponderEliminar
  29. Una pregunta como puedo hacer para que las imagenes ( estoy colocando 4 gatget verticales en un mismo HTML/Javascript pero tiene una ligera avertura entre ellos de medio centimetro, como podria hacer para que se vean pegados ? espero tu amable respuesta y si no fuera mucha la molestia a mi correo personal (: abrazos potro!

    ResponderEliminar
  30. retlawx******@****live.com ( quita los ****) gracias ;)

    ResponderEliminar
  31. Hola Kylie,

    Al correo no puedo responderte pero con mucho gusto lo hago por aquí ;)
    Para que las imágenes no tengan espacio entre ellas coloca los códigos pegados uno detrás de otro.
    Si no obtienes el resultado esperado dime en cuál blog lo has puesto y en qué parte exactamente está.

    Saludos.

    ResponderEliminar
  32. Hola, Potro. Esto mismo se podría hacer pero en vez de cambiar una imagen cualquiera se cambiara la cabecera del blog?

    Saludos.

    ResponderEliminar
  33. Sí, pero no con el gadget de la cabecera actual, tendrías que eliminar la cabecera y en su lugar poner un elemento HTML/Javascript, ahí pondrías el script que se menciona en la entrada.

    Saludos :)

    ResponderEliminar
  34. Hola yo tengo un problema porque lo pongo todo bien y con el html-kit me funciona perfecto pero lo ago desde blogger y no me funciona, no se me cambia la imagen ni nada, me sale tal y como la tenía. ¿Podría ser por la plantilla? Necesito ayudaaa

    ResponderEliminar
    Respuestas
    1. Habría que ver la entrada o blog donde lo has puesto.

      Eliminar
  35. Hola Potro. Una pregunta, porque la imagen tarda tanto en cambiar_???

    ResponderEliminar
    Respuestas
    1. Puede ser que la imagen (cualquiera de las dos) es un poco grande.

      Eliminar
    2. Que va son todas de 250x250 maximo. Si en el ejemplo que tienes tu de perfil tambien es asi si te fijas bien.. pero una vez recuerdo que puse una como esta pero directamente en la plantilla (Leer mas) y entonces funcionaba perfectamente.
      Bueno igualmente asi no esta mal.) Saludos...

      Eliminar
  36. Que se coloca en donde dice URL del enlace? Si ya coloque los urls de las imagenes?

    ResponderEliminar
  37. Que se coloca en el URL del enlace? Si ya yo coloque las URLs de las imagenes?

    ResponderEliminar
    Respuestas
    1. La URL de la página que quieras que abra cuando se dé click en ella. Si no quieres que abra ningún enlace pon ahí un signo de gato #

      Eliminar
  38. Gracias, me ha costado encontrar esto para que me funcione en IE9.
    Excelente

    ResponderEliminar
  39. Gracias, me ha costado encontrar este codigo para que funcione en IE9.
    Excelente.

    ResponderEliminar
  40. hola, estoy haciendo un libro virtual en html y java script y quisiera agregarle imágenes cambiante(es decir que en la pagina que yo desee la imagen que este pueda mostrar otra al colocar el cursor sobre la misma), me gustaría recibir algún tipo de ayuda, esto es para mi proyecto de grado.
    gracias.

    ResponderEliminar
    Respuestas
    1. No he comprendido YOYI, ¿me puedes dar más detalles?

      Eliminar
  41. hola amigo como podría poner dos imagenes una al lado de la otra

    ResponderEliminar
    Respuestas
    1. Hola Susi, la manera más práctica es que uses una tabla HTML, de esa manera puedes acomodar tus imágenes poniendo en cada celda el código de cada imagen.

      Eliminar
  42. potro y como puedo hacer con un Logo de la cabecera que lleve URL

    ResponderEliminar
    Respuestas
    1. Es igual, en el código verás que dice "URL del enlace", ahí deberás poner el link a donde quieres que tu logo enlace.

      Eliminar
  43. Oooh, que chulo!!! Oye, sabes como se puede hacer algo parecido pero que salga los iconos de las redes sociales y puedas hacer click en ellos? Por ejemplo, como aparece en este demo: http://demo.veethemes.com/demo?theme=Gossip y con texto escrito por tí, tambien :)
    Gracias!

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Tambien me gustaría saber como has realizado la tabla de las redes sociales (blogger, facebook y googleplus) que aparece en tu blog... No encuentro el review :(

      Eliminar
    3. Hola, lo del demo no lo sé. Lo del gadget que uso lo puedes ver aquí:
      http://www.compartidisimo.com/2011/10/crear-una-seccion-con-pestanas-para.html

      ¡Saludos!

      Eliminar
    4. Muchas gracias Potro :) voy a verlo ahora :)

      Eliminar
  44. Hola, quisiera saber si se puede hacer que al hacer click la imagen cambie a otra

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger