Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Efecto imagen que cambia al pasar el cursor


Este tutorial lo aprendí hace muchísimo pero ya casi lo tenía olvidado -memoria de corto plazo- Así que hoy se los vengo a mostrar (*O*) -explotan bombardas(?)-

¿EN QUÉ CONSISTE EL EFECTO ESTE? Es muy fácil de entender como funciona con tan sólo leer el título de esta publicación y podría decir en que consiste pero dejaré que mejor lo comprueben ustedes mism@s, pasen el cursor sobre la imagen de  Tutoriales  ¿LO VIERON? ¿SI VERDAD? ¿Quieres saber como se hace? Bueno es muy fácil, vamos al paso a paso.

PASO 1: Copia y pega el sgte. código donde quieras ubicar. Por ejemplo en una publicación (como la imagen de arriba ↑↑↑), en un gadget o hasta en tu misma pantilla HTML (bueno porque básicamente este es un código HTML. LOL).
<img style="display: block;" src="URL DE PRIMERA IMAGEN" onmouseover="this.src='URL DE SEGUNDA IMAGEN'" onmouseout="this.src='URL DE PRIMERA IMAGEN'" />
PASO 2: Modifica los URL de la PRIMERA y SEGUNDA IMAGEN. Trata de que ambas imágenes tengan las misma proporciones (el mismo tamaño).

PASO 3: Clic en Vista previa y si todo está como tu quieres, pero ojo ahí no podrás ver funcionar el efecto, esto sólo lo digo para que veas que no se desconfiguró nada en tu blog. Bueno si todo sigue normal, bello y sexy (ya se me pego la palabrita Danni-chan XD) dale clic en Guardar y LISTO!!!

PASO 4: A jugar disfrutar del bello efecto (*≧▽≦)ノシ))


Yo apliqué ese efecto en las imágenes de ENTRADAS ANTIGUAS, RECIENTES y HOME, y la verdad es que no puedo dejar de pasar la flechita (cursor) sobre ellas (*≧艸≦). EN FIN! Es todo por hoy, ahora sí me voy a dormir ε-(´・`). A pesar de haber dormido por la tarde aún muero de sueño, maldita universidad me consumes щ(ಥДಥщ) BYESU!

1 comentario:

  1. yo de momento estoy en el insti jaja pero me kita mucho tiempo y muy lindo el tuto yo lo habia provado en una plantilla de prueva a por cierto dire los resultadoss del concurso este domingo

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.