Tecnología

Marga Desing Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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í.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo hacer una captura de pantalla

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.. ...

Cómo activar y validar Windows 7

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 ...

Zamzar: conversor de imágenes

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

general diseño de blogs

Cómo hacer que las fotos de tu blog se vuelvan más claritas al pasar el ratón por encima

Algo que parece que está de moda es lo de que al pasar por encima de una foto con el ratón, ésta se aclare un poco. No tengo claro muy bien el motivo (si se usa un botón de Pin It como en este caso, lo puedo entender, porque así se ve un poquito más el botón de Pinterest), pero bueno, será solo una moda. Me lo habéis preguntado unas cuantas y traigo por tanto tutorial. Fijaos de lo que hablo por c ...

Blogger html Trucos

Deshabilitar el botón derecho del ratón

¿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 ...

recursos blog tutoriales

Tutorial: Boton "pin it" personalizado actualizado

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 ...

Tutoriales Blogging Tips

Cómo colocar una imagen.

Una de las partes que considere importantes en cuanto al diseño y la estructura de mi blog, fueron las imágenes. En la imagen de arriba puedes observar dos ejemplos de lo que quiero mostrarte hoy, #1 vemos como la imagen es mucho mas pequeña que la entrada/post, cuando insertamos varias imágenes todas con una medida diferente, nuestras entradas y por lo tanto el mismo blog tendrá un aspecto deseq ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

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 gadgets Tutoriales

Cómo instalar un botón de subir arriba

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 ...

FOTOGRAFÍA Adobe Photoshop CC 2017 editor de fotos profesional ...

Cómo cambiar el tamaño de una imagen

Cómo cambiar el tamaño de una imagen Seguro que en más de una ocasión has querido cambiar el tamaño de una imagen y no has sabido cómo realizar la tarea. En realidad con cualquier editor fotográfico o programa de diseño gráfico se puede cambiar el tamaño de las fotos.  Estamos hablando de reducir o ampliar el tamaño de una foto según los […] Este artículo es un contenido original del Blog de ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

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 ...

artículos iframes

Una web dentro de otra (iframe) en joomla con jce

En algunas ocasiones nos puede interesar colocar en un artículo de nuestra web directamente una ventana con otra web en lugar de un enlace, es lo que se denomina una iframe. Aunque en joomla en principio parece difícil, la verdad es que hay un método muy sencillo de colocar una web dentro de otra como veis en la imagen. Aquí, en este artículo sobre Bellezas Funerarias en Antequera de mi web www.p ...

Sin categoría

Una web para dibujar , Linify

Linify, una peculiar página web que nos permite dibujar cualquier fotografía haciendo uso solo de líneas rectas. En general, el funcionamiento de Linify es bastante simple:simplemente es necesario subir o introducir la URL de la imagen que queramos transformar en un dibujo hecho a base líneas y hacer clic sobre el botón Draw!.