Hacer un menú de imágenes con efecto hover

15.5.15



Hola a todos :) ! El tutorial de hoy es un poquito largo pero el resultado es muy bonito, ideal  para hacer algo distinto en el blog, espero les guste...

1. Diseñar las imágenes que vamos a utilizar:

  • Vamos a iniciar diseñando las imágenes que van a ser  dos  por cada botón y tienen que ser  de distinto color para que se note el efecto hover al pasar el puntero del mouse sobre ellas.
Consejo: Utilizar una paleta de colores para que las imágenes combinen entre si  
  • Donde encontrar iconos bonitos? Hace días encontré esta página preciosa, tiene unos iconos muy bonitos, aunque debes de tener Illustrator o Photoshop para poder usarlos: V E R   P Á G I N A  y para los que no utilicen estos programas les dejo esta página donde hay unos iconos preciosos  V E R   P Á G I N A
  • Donde encontrar paleta de colores?: Esta página la uso mucho y me encanta!  V E R   P Á G I N A

2. Obtener la url de las imágenes:

  • Alojar las imágenes en Dropbox  o en los álbumes de google, en mi caso yo siempre uso los álbumes de mi cuenta de google porque es muy sencillo y efectivo.

3. Ordenar etiquetas en blogger:

4. Modificar el código para crear el menú:

  • Copiar y pegar este código en un documento de texto (word) para poder editarlo
  • Cambiar los textos que están en colores por la URL de nuestras imagenes y la URL de la página a la que vamos a enlazar cada imagen. 

<center>
<table cellpadding="12px" cellspacing="12px">
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
  </table>
</center>

E L   C Ó D I G O

  • <center> : Esto espara centrar las imágenes
  • <table cellpadding="12px" cellspacing="12px">:  Esta parte es la que hace que nuestras imágenes se vean alineadas e indican el espacio de separacion de cada una, asi que puede variar el valor 12px a más o menos, todo depende de como nos guste.
  • URL página para enlazar: Acá debemos de colocar la URL de la página que queremos que nos lleve al darle clic a la imagen
  • URL imagen #1: Colocamos la URL de la imagen que queremos que aparezca  de forma predeterminada 
  • URL imagen #2: Colocamos la URL de la imagen que va a crear el efecto hover, entonces debe de ser la imagen que es de color diferente. Esto es que al pasar el cursor del mouse sobre la imagen se cambie a la imagen que esta de otro color.
  • height="90px: Indica la altura de cada imagen
  • width="85px: Indica el ancho de cada imagen
  • Onmouseout:  Muestra la  imagen #1  cuando el puntero del  mouse esta fuera
  • Onmouseover: Muestra la imagen #2 cuando el puntero del mouse esta sobre la imagen #1

5. Donde colocar el menú?:

  • Este menú lo podemos colocar donde  queramos, únicamente debemos de copiar y pegar todo el código en un gadget de HTML y listo.

Y este es el resultado final:

A que es un menú precioso !! Espero les sea util
Nos vemos en el siguiente post
Un abrazo

más post bonitos que de seguro te van a interesar

17 comentarios

  1. Un menú precioso, no, preciosísimo!!!!!!!, me ha encantado el tutorial.
    Un abrazo

    ResponderEliminar
  2. ¡Qué útil! Me voy a poner en cuanto pueda en mi blog esto. ¡Me encantan tus tips!

    ResponderEliminar
    Respuestas
    1. Que bien! Ahi me enseñas el resultado :D

      Eliminar
  3. Aunque suene pedante... ¡Genial! ¡Formidable! Uno de tus mejores tutoriales. Muuuuuuuuuuchas gracias. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias Rebeca, el resultado de este tutorial a mi también me encanta ♥

      Eliminar
  4. Muy bonito me encanto la paleta de colores ;)

    ResponderEliminar
    Respuestas
    1. Si, esta paleta ya la llevo usando mucho tiempo jeje pero los colores son tan bonitos

      Eliminar
  5. La de cosas que aprendemos contigo! Me encanta

    ResponderEliminar
  6. ¡¡Son mágicos!! Que cuquitos... me encantan. Además esos colores son preciosos...

    Muchas gracias, Wendy.
    ¡Un muackiles!

    ResponderEliminar
  7. Muy bonito. Gracias por el tutorias.
    Besos

    ResponderEliminar
  8. Respuestas
    1. Me encanta, que pena que no tenga mucho tiempo para ponerlo en práctica!!

      Eliminar
  9. Hola.. me encanto muchas gracias; Una duda: si guardo las imagenes en mi cuenta google o en el dropbox no aparecen las imagenes, si copio directamente la direccion de las imagenes ya logre el efecto... por que sera?? Algo me falla acaso?? o asi lo puedo dejar..?? Muchas gracias y seguire por aqui leyendote. Saluditos Chao.

    ResponderEliminar
    Respuestas
    1. Hola y donde tienes alojadas las imágenes? Qué estén en un lugar seguro donde no se borrarán esta bien :D

      Eliminar
  10. Hola!! Me encantó el tutorial pero tengo una duda, cómo puedo hacer para que las imágenes queden en vertical? Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola, este es un poco larga para explicarlo en un comentario, ahora ando ausente pero en enero inicio de nuevo a publicar post, haré un post sobre tu duda :D

      Eliminar

Gracias por tus comentarios

15.5.15

Hacer un menú de imágenes con efecto hover



Hola a todos :) ! El tutorial de hoy es un poquito largo pero el resultado es muy bonito, ideal  para hacer algo distinto en el blog, espero les guste...

1. Diseñar las imágenes que vamos a utilizar:

  • Vamos a iniciar diseñando las imágenes que van a ser  dos  por cada botón y tienen que ser  de distinto color para que se note el efecto hover al pasar el puntero del mouse sobre ellas.
Consejo: Utilizar una paleta de colores para que las imágenes combinen entre si  
  • Donde encontrar iconos bonitos? Hace días encontré esta página preciosa, tiene unos iconos muy bonitos, aunque debes de tener Illustrator o Photoshop para poder usarlos: V E R   P Á G I N A  y para los que no utilicen estos programas les dejo esta página donde hay unos iconos preciosos  V E R   P Á G I N A
  • Donde encontrar paleta de colores?: Esta página la uso mucho y me encanta!  V E R   P Á G I N A

2. Obtener la url de las imágenes:

  • Alojar las imágenes en Dropbox  o en los álbumes de google, en mi caso yo siempre uso los álbumes de mi cuenta de google porque es muy sencillo y efectivo.

3. Ordenar etiquetas en blogger:

4. Modificar el código para crear el menú:

  • Copiar y pegar este código en un documento de texto (word) para poder editarlo
  • Cambiar los textos que están en colores por la URL de nuestras imagenes y la URL de la página a la que vamos a enlazar cada imagen. 

<center>
<table cellpadding="12px" cellspacing="12px">
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td> 
  </table>
</center>

E L   C Ó D I G O

  • <center> : Esto espara centrar las imágenes
  • <table cellpadding="12px" cellspacing="12px">:  Esta parte es la que hace que nuestras imágenes se vean alineadas e indican el espacio de separacion de cada una, asi que puede variar el valor 12px a más o menos, todo depende de como nos guste.
  • URL página para enlazar: Acá debemos de colocar la URL de la página que queremos que nos lleve al darle clic a la imagen
  • URL imagen #1: Colocamos la URL de la imagen que queremos que aparezca  de forma predeterminada 
  • URL imagen #2: Colocamos la URL de la imagen que va a crear el efecto hover, entonces debe de ser la imagen que es de color diferente. Esto es que al pasar el cursor del mouse sobre la imagen se cambie a la imagen que esta de otro color.
  • height="90px: Indica la altura de cada imagen
  • width="85px: Indica el ancho de cada imagen
  • Onmouseout:  Muestra la  imagen #1  cuando el puntero del  mouse esta fuera
  • Onmouseover: Muestra la imagen #2 cuando el puntero del mouse esta sobre la imagen #1

5. Donde colocar el menú?:

  • Este menú lo podemos colocar donde  queramos, únicamente debemos de copiar y pegar todo el código en un gadget de HTML y listo.

Y este es el resultado final:

A que es un menú precioso !! Espero les sea util
Nos vemos en el siguiente post
Un abrazo
Share to Facebook Share to Pinterest

17 comentarios:

  1. Un menú precioso, no, preciosísimo!!!!!!!, me ha encantado el tutorial.
    Un abrazo

    ResponderEliminar
  2. ¡Qué útil! Me voy a poner en cuanto pueda en mi blog esto. ¡Me encantan tus tips!

    ResponderEliminar
    Respuestas
    1. Que bien! Ahi me enseñas el resultado :D

      Eliminar
  3. Aunque suene pedante... ¡Genial! ¡Formidable! Uno de tus mejores tutoriales. Muuuuuuuuuuchas gracias. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias Rebeca, el resultado de este tutorial a mi también me encanta ♥

      Eliminar
  4. Muy bonito me encanto la paleta de colores ;)

    ResponderEliminar
    Respuestas
    1. Si, esta paleta ya la llevo usando mucho tiempo jeje pero los colores son tan bonitos

      Eliminar
  5. La de cosas que aprendemos contigo! Me encanta

    ResponderEliminar
  6. ¡¡Son mágicos!! Que cuquitos... me encantan. Además esos colores son preciosos...

    Muchas gracias, Wendy.
    ¡Un muackiles!

    ResponderEliminar
  7. Muy bonito. Gracias por el tutorias.
    Besos

    ResponderEliminar
  8. Respuestas
    1. Me encanta, que pena que no tenga mucho tiempo para ponerlo en práctica!!

      Eliminar
  9. Hola.. me encanto muchas gracias; Una duda: si guardo las imagenes en mi cuenta google o en el dropbox no aparecen las imagenes, si copio directamente la direccion de las imagenes ya logre el efecto... por que sera?? Algo me falla acaso?? o asi lo puedo dejar..?? Muchas gracias y seguire por aqui leyendote. Saluditos Chao.

    ResponderEliminar
    Respuestas
    1. Hola y donde tienes alojadas las imágenes? Qué estén en un lugar seguro donde no se borrarán esta bien :D

      Eliminar
  10. Hola!! Me encantó el tutorial pero tengo una duda, cómo puedo hacer para que las imágenes queden en vertical? Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola, este es un poco larga para explicarlo en un comentario, ahora ando ausente pero en enero inicio de nuevo a publicar post, haré un post sobre tu duda :D

      Eliminar

Gracias por tus comentarios