Cambiar imagen al pasar el mouse

|

Anteriormente vimos cómo cambiar una imagen por otra al pasar el mouse utilizando un script. Pero para quienes al igual que yo les gustan las cosas sin tantas complicaciones, veremos una forma simplificada de tener el mismo efecto, sin scripts, usando un sólo código.
Este es un ejemplo, pasa el cursor sobre la imagen para que cambie.



Sólo basta que pongas este código en una entrada o un elemento HTML/Javascript:
<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Cambia lo que está en rojo por la URL de la imagen que tendrás inicialmente, y lo que está en verde por la URL de la imagen que cambiará al pasar el mouse. Trata que las dos imágenes tengan el mismo tamaño para conseguir un mejor resultado.

Puedes usarlo para hacer algún menú o para mostrar fotos de "antes y después".

37 comentarios:

pepe dijo...

si esta muy bueno este script, aparte que es mucho mas simple.
Saludos.

Guti dijo...

si señor muy bueno el truco y además muy sencillo
sobre todo me encanta por la sencillez.a proposito se podría hacer algo parecido que cambie la imagen sin necesidad de tener que pasar el mouse.Saludos

El Potro™ dijo...

Hola pepe, seguro será de mucha utilidad =)
Saludos.

Hola Guti, en ese caso podrías usar un banner cambiante, ahí puedes poner las imágenes que quieras y cambian automáticamente:
http://ciudadblogger.com/2009/04/banner-cambiante.html
Saludos.

pepe dijo...

Hey potro, esta muy buena la ciudad para el mobile.
Saludos.

El Potro™ dijo...

Hola pepe,

Gracias, apenas hoy lo hice. El fin de semana publico cómo hacerlo.

Saludos.

Anne dijo...

Hola por aca. . . . que linda ha quedado, tu casa, jajja, me gustan mucho tus cambios.-
Lo del ratón. . . . lo voy a intentar. . .
La verdad, tu haces ver facil, todo.-

Muchos cariños

Anne

El Potro™ dijo...

Hola ARMANDOKUN, igual a mí me gustaron las imágenes =)
Saludos!


Hola Anne, qué bueno que te gustó cómo quedó la nueva plantilla. Lo de las imágenes es muy simple, así que espero que no se le complique a nadie.
Cariños!

Hola Emanuel, gracias por comentar =)
Saludos!

Amelio Luna dijo...

Te quiero agradecer todo, todo todo lo que haces por gente como yo, que sabiendo poco, se cree que sabe mucho. He aprendido mucho aquí y espero seguir aprendiendo. Tanto sé, que me doy el lujo de sugerirte que la primera foto, debería haber sido de una persona encendiendo para luego ver el esqueleto. De todas maneras solo es una opinión. Este blog es el mejor que hay en toda la blogófera y no exagero, me estoy armando varios blogs y estoy "recorriendo" mucho. En el blog de trucos que estoy preparando, colocaré un banner destacado de ustedes a modo de agradecimiento. Un saludo gran y de nuevo, muchas gracias!

El Potro dijo...

Hola Amelio Luna,

En algún momento todos nos damos cuenta de que sabemos muy poco y que aún hay mucho por aprender, lo importante es saber que siempre se puede aprender más.

Las fotos no son mías, la verdad es que no sabía qué imágenes poner de ejemplo y de casualidad me encontré la segunda y luego buscando más fotos me encontré en otro sitio la primera, pero ya no pude saber si las dos están hechas por casualidad o son una serie de varias fotos =S

Mucha suerte y éxito con tus blogs y gracias por el banner y por tus comentarios.
Cualquier cosa estoy a tus órdenes.
Saludos!

Disniruña dijo...

gracias!!!!
yo necesito hacer una especie de menu con este codigo que tu das, pero a su vez, lo meto dentro de este que permite abrirlo en otra ventana lo hago con lo que me dan aqui:http://soporte.miarroba.com/1368/6772545-como-hago-para-que-se-habra-otra-ventana/

por seperado me salen los 2 y juntos no. solo sustitullo donde dice imagen por el codigo que tu das y logicamente tendria que salir!!!
sabes la solucion!!!???

El Potro dijo...

Hola Disniruña,

Tendrías que usar este código:

<a href="URL del enlace" target="_blank"><img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/></a>

Saludos.

Disniruña dijo...

siento no haberte podido dejar el codigo que usaba, pero esto no me dejaba.
ese es es codigo que utilizo, es de logica pensé que el codigo de lo de las 2 fotos vaya en el lugar de la foto del codigo 2.
pero no me funciona. por separado me van bien.
lo has probado? es que ya no entiendo por que me pasa. tendría que funcionar.

El Potro dijo...

Hola Disniruña,

Con el código que te di funciona, dime qué imágenes deseas usar en un ejemplo y a dónde debe enlazar para que te dé el código y con ese te bases para hacer los otros.

Saludos.

Nosotros mismos... dijo...

por ejemplo:
http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg
y
http://img45.xooimage.com/files/5/d/7/tematicos-agua2-151fd70.jpg

Nosotros mismos... dijo...

y por cierto muuuuchas gracias por la atención si no lo habia dicho antes
soy disniruña desde otra cuenta.
gracias gracias gracias

El Potro dijo...

Hola de nuevo =)
No me dijiste a dónde debe enlazar así que puse como ejemplo a CiudadBlogger, el código sería este:

<a href="http://ciudadblogger.com" target="_blank"><img src="http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg" onmouseover="this.src='http://img45.xooimage.com/files/5/d/7/tematicos-agua2-151fd70.jpg';" onmouseout="this.src='http://img41.xooimage.com/files/3/8/3/tematicos-agua-151fd5c.jpg';"/></a>

De esta forma la imagen cambia por otra al pasar el mouse y la URL del enlace abre en otra ventana al hacer click.

Saludos.

Disniruña dijo...

por fin me funciona!!! gracias!!!!
aun a riesgo de parecer inutil, esta es la que ponia yo:

http://img41.xooimage.com/files/a/4/b/sin-t-tulo-1-152c4c3.jpg
(no me deja ponerlo en el comentario, os mando la imagen)

y yo la veo igual por más que la miro, hay algun detallle que se me escapa y no lo consigo ver. he sido muy malo siempre en esto de las 10 diferencias!

El Potro dijo...

Jajajaja, yo también era malo buscando las 10 diferencias.

El problema (y que es muy común) es que no ponías un espacio entre la URL del enlace y el target="blank" por eso es que no funcionaba. Tienes que dejar ese espacio en blanco para que funcione apropiadamente.

Saludos!

El Potro dijo...

Hola Nosotros mismos,

Qué gusto que te haya sido útil.
Bienvenido!

José dijo...

Estimado Potro, gracias por poder compartir con nosotros tus conocimientos, tengo una pregunta yo soy un novanto en esto y disculpa mi ignorancia, en este post cuando decis que cambie la url de la imagen, tengo que subir mi imagen a un servidor o la imagen la extraigo de mi compu, podes hacer el favor de aclararme eso.

Saludos
Benjamín

El Potro dijo...

Hola José,

Puede ser cualquiera de las dos opciones, si ya tienes una imagen en un servidor usa esa imagen, si aun la tienes en tu compu súbela a un servidor y obtén su URL.

Saludos.

Rincon dijo...

una pregunta..
si esta alojada en mi servidor (images/...)
porque no me funciona¿?

El Potro dijo...

Eso sólo serviría si tu servidor fuera así:
http://tublog.com/images

Pero en Blogger eso no se puede, pues el servidor es blogspot y la única forma que se suben fotos desde ahí es con Picasa.

Big Bang dijo...

¿Como hago esto y que tenga un enlace que se abra en una nueva pestaña?

El Potro dijo...

Sólo encierra el código de la imagen así:

<a href="URL del enlace" target="_blank">
...código de la imagen...
</a>

Sant Gaudenci dijo...

Hola Potro,
ante todo, mil gracias por la tarea que realizas de ayudar a los más novatos... Incluido un servidor! :)

Llevo unas semanas arreglando mi blog y no hay manera de conseguir que la plantilla de blogger que uso me permita hacer esta acción de cambiar la imagen al pasar por encima. Com este método que comentas tampoco me sale!!! Eso si, creando un gadget con un html y metiendo ahí el codigo no hay problema! Necesito poder incluirlo en la plantilla... Se te ocurre algo de lo que le pueda pasar a mi plantilla!!!!

Un fuerte saludo des de Barcelona!

Sant Gaudenci dijo...

Por cierto, el bloc en cuestión está oculto, por eso no he mandado la dirección.. Si hace falta cualquier cosa te la mandaré sin problema!!!

El Potro dijo...

Hola Sant Gaudenci,

Entra a esta página:
http://www.blogcrowds.com/resources/parse_html.php
Ahí pon el código para cambiar la imagen incluyendo las URLs de las imágenes, dale click en Parse y copia el código que saldrá, ese código úsalo directo en la plantilla, de esa forma sí funcionará.

Saludos.

Sant Gaudenci dijo...

Hola Potro!
Muchissimississimas gracias por el consejo!!! Lo he seguido y me ha ido de maravilla.... Com Mozilla Firefox. En Explorer no hay manera! Sabrias decirme porque??

Saludos y gracias de nuevo!!!

El Potro dijo...

No lo sé, debería funcionar también en Internet Explorer :(

Sant Gaudenci dijo...

Debería.. pero no lo hace!!!! Mira que es complicado el mundo del código, eh???? :D
Gracias por tu atención y supongo que hasta muy pronto!!!!

Ricardo Baena dijo...

Hola Potro,

Vuelvo a ti cada vez que necesito ayuda con mi bitácora. Mi cuestión es la siguiente:

Quiero poner una lista de nombres de personas y que al pasar el ratón sobre cada uno de los nombres aparezca una imagen flotante al lado derecho con la foto del individuo en cuestión.

¿Cómo lo hago?

Gracias de antemano.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo