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".
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
37 comentarios:
si esta muy bueno este script, aparte que es mucho mas simple.
Saludos.
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
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.
Hey potro, esta muy buena la ciudad para el mobile.
Saludos.
Hola pepe,
Gracias, apenas hoy lo hice. El fin de semana publico cómo hacerlo.
Saludos.
Mae esta muy bueno esas imajen.
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
Todo lo dijo Anne!!!
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!
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!
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!
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!!!???
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.
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.
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.
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
y por cierto muuuuchas gracias por la atención si no lo habia dicho antes
soy disniruña desde otra cuenta.
gracias gracias gracias
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.
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!
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!
espectacular.
has ganado un lector más
Hola Nosotros mismos,
Qué gusto que te haya sido útil.
Bienvenido!
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
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.
exelente :D
otra vez gracias :)
una pregunta..
si esta alojada en mi servidor (images/...)
porque no me funciona¿?
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.
¿Como hago esto y que tenga un enlace que se abra en una nueva pestaña?
Sólo encierra el código de la imagen así:
<a href="URL del enlace" target="_blank">
...código de la imagen...
</a>
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!
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!!!
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.
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!!!
No lo sé, debería funcionar también en Internet Explorer :(
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!!!!
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.