Camiar una imagen por otra al pasar el ratón



Hoy os voy a enseñar un pequeño truco de cómo cambiar una imagen por otra al pasar el ratón.

Es tan simple como añadir el siguiente código en un 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;"/>

donde en la parte en rojo deberás colocar la URL de la primera imagen, y en la parte verde, la URL de la segunda imagen.

Es mejor que las dos imágenes tengan el mismo tamaño para conseguir un mejor efecto.

Es ideal para utilizarlo a la hora de crear un menú o para mostrar un "antes y después".



Y guardáis cambios.

Mirad, este es el que he hecho yo como prueba:



¿Habéis visto que fácil?



Fuente: este post proviene de Marga Desing, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cuando era "novata" en esto de internet, flipaba de las cosas que la gente sabía hacer y que para mí eran super difíciles. Me preguntaba ¿y cómo habrá hecho ésto? ¿y esto otro? pero luego.. ...

Hace poco me formatearon mi portátil y cual fue mi sorpresa que a los días siguientes me salía el dichoso mensaje de que tenía que validar Windows 7. Claro, supuse que el windows 7 que me habían inst ...

Para los que trabajamos con programas de diseño, como el Paint o el Photofiltre, nos es más fácil hacerlo con imágenes con formato PNG o JPG, que con PDF. Muchas veces, a la hora de descargar cosillas ...

Etiquetas: BloggerhtmlTrucos

Recomendamos

Relacionado

recursos blog tutoriales

Hola! hola!!! Hoy vengo a enseñarte un tutorial para personalizar tu blog, se trata del código html para poner el boton "pin it" pero personalizado. Si tu ya lo tenias puesto en el blog te habrás dado cuenta que desde hace tiempo ya no funciona, ya no te aparece la imagen que tenias puesta y no te deja pinear las fotos :( y eso se debe a que el javascript dejo de funcionar. Por lo visto ...

Blogger gadgets Tutoriales

Si quieres que tu blog tenga ese botoncito en el lateral para subir arriba (como verás, yo tengo a mi perrito que dice "Súbeme") tenemos que hacer lo siguiente: Nos vamos a Diseño ➡ Añadir un gadget ➡ HTML. Le añadimos el siguiente código: <a href=# style=display croll;position:fixed;bottom:5px;right:20px; title=IR ARRIBA><img src="URL del botón de subir arriba", wid ...

Tutoriales Blogging Estilos

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

Tutoriales Redes Sociales Web

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

general

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...

Blogger html Trucos

¿Habéis pensado alguna vez en inhabilitar el botón derecho del ratón? Pues hoy os voy a explicar cómo se hace. Es un buen método, para no permitir que te copien, ni coger tus imágenes para guardarlas. Su instalación es tan sencilla que requiere sólo un paso. Veréis: Plantilla-Edición de HTML Dentro del recuadro pulsáis Control + F y dentro de la casilla ponéis </body> Justo antes, pegáis l ...

watercolour acuarelas free printable ...

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

acuarelas diseño watercolour ...

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

Diseño para Blogs Uncategorized código ...

Los mejores trucos HTML para tu blog que no te puedes perder Hay cosas que sólo las podemos hacer mediante código html y conviene saber algunos trucos que te ayuden a mejorar tu blog ya sea en blogger o wordpress. En este post hay algunos trucos html para que puedas controlar un poco más tu diseño y hacer cosas a mano que vas a necesitar para tus post , además así si no has usado nunca código te v ...

propuestas

Al navegar por Internet con nuestro móvil, muchas veces nos encontramos con pequeños bloqueos, interrupciones en el dibujado de la página porque se están cargando anuncios, o imágenes... en diversas ocasiones percibimos la navegación como algo poco fluido o inmediato. La iniciativa de código abierto AMP (Accelerated Mobile Pages) viene a crear un nuevo "ecosistema" de programación que pe ...