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".
Tantos códigos me han dado mucha sed ¿qué tal una cerveza?
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Enviar un correo
¿Dónde estás Superman?
Iconos RSS.PNG)
Música JPZ
24 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.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.