Foros del Web » Creando para Internet » CSS »

menú con imágenes

Estas en el tema de menú con imágenes en el foro de CSS en Foros del Web. hola a todos, he creado un menú con css, a través de imágenes. con a , a:hover. el menú funciona correctamente, el problema es que ...
  #1 (permalink)  
Antiguo 26/05/2009, 03:31
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
menú con imágenes

hola a todos,

he creado un menú con css, a través de imágenes. con a , a:hover.
el menú funciona correctamente, el problema es que la propiedad a:hover tarda un poco el cargar la imagen, sobre todo en ie.
Las imágenes del menu están optimizadas y pesan alrededor de 1KB cada una.

Alguien sabe como se puede optimizar este tipo de menus???

Muchas gracias
  #2 (permalink)  
Antiguo 26/05/2009, 03:36
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: menú con imágenes

si, puedes hacer que la imagen del menu sea una doble, que en la parte superior tenga un tipo de boton y en la inferior otro, entonces con el a:hover simplemente has de cambiarle las propiedades para mostrar la otra.

Si quieres aquí tienes mas ayuda
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 26/05/2009, 03:45
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menú con imágenes

Cita:
Iniciado por hades87 Ver Mensaje
si, puedes hacer que la imagen del menu sea una doble, que en la parte superior tenga un tipo de boton y en la inferior otro, entonces con el a:hover simplemente has de cambiarle las propiedades para mostrar la otra.

Si quieres aquí tienes mas ayuda
eso es lo q hago, el problema es q noto q el salto entre las 2 imágenes tarda poco.
y eso q las imágenes pesan 1KB cada una.
en firefox no tarda, sin embargo en ie tarda un poco
  #4 (permalink)  
Antiguo 26/05/2009, 03:47
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: menú con imágenes

Pues es raro, por que si las imágenes pesan poco y además es una sola no debería de haber problema, aún que ya sabemos que IE siempre va como le da la gana
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 26/05/2009, 03:57
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menú con imágenes

Cita:
Iniciado por hades87 Ver Mensaje
Pues es raro, por que si las imágenes pesan poco y además es una sola no debería de haber problema, aún que ya sabemos que IE siempre va como le da la gana
estoy harto del ie
es una basura, y encima ahora resulta q hay q cuadrar todo para el ie8, xq los impresentables de microsoft no realizan un navegador q por lo menos respete las propiedades que funcionaban en la versión anterior
  #6 (permalink)  
Antiguo 26/05/2009, 04:21
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: menú con imágenes

Hola Foroworld, lo que creo que necesitas es hacer el menu con sprites. Se trata de una sola imagen que contenga todo el menu tanto normal como en hover, luego le dices de que parte a que parte lo quieres.
De esta manera se carga una sola imagen y al cargarse de inicio no pasa lo que tu dices.

También te recomiendo que pongas spam al menu para hacerlo accesible.

Saludos
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #7 (permalink)  
Antiguo 26/05/2009, 04:51
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menú con imágenes

Cita:
Iniciado por Aresillo Ver Mensaje
Hola Foroworld, lo que creo que necesitas es hacer el menu con sprites. Se trata de una sola imagen que contenga todo el menu tanto normal como en hover, luego le dices de que parte a que parte lo quieres.
De esta manera se carga una sola imagen y al cargarse de inicio no pasa lo que tu dices.

También te recomiendo que pongas spam al menu para hacerlo accesible.

Saludos
Hola Aresillo,

Me podrías explicar lo de los sprites??? tienes algún ejemplo???

Muchas gracias
  #8 (permalink)  
Antiguo 26/05/2009, 05:02
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: menú con imágenes

Te explico que se trata de reagrupar las imagenes que necesitas en una web en una sola imagen para que se carga más rápido. Luego cuando quieres añadir una imagen, la linkas y le dices de que parte a que parte quieres que salga.
Por ejemplo, esta es la imagen que utiliza google, en vez de utilizar varias.


Te dejo dos links más explicativos:

Menu CSS con Sprites

Video cómo usar los sprites (en inglés)

Saludos
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #9 (permalink)  
Antiguo 26/05/2009, 05:10
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: menú con imágenes

Muy interesante la información Aresillo, no había visto mucho esta técnica :)
__________________
No diseñes usando tablas.
  #10 (permalink)  
Antiguo 26/05/2009, 05:15
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menú con imágenes

Cita:
Iniciado por Aresillo Ver Mensaje
Te explico que se trata de reagrupar las imagenes que necesitas en una web en una sola imagen para que se carga más rápido. Luego cuando quieres añadir una imagen, la linkas y le dices de que parte a que parte quieres que salga.
Por ejemplo, esta es la imagen que utiliza google, en vez de utilizar varias.


Te dejo dos links más explicativos:

Menu CSS con Sprites

Video cómo usar los sprites (en inglés)

Saludos
La verdad es q tiene una pinta cojonuda, lo probaré.

muchísimas gracias.
  #11 (permalink)  
Antiguo 26/05/2009, 05:48
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: menú con imágenes

De nada..

Un saludo y gracias a los dos.
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #12 (permalink)  
Antiguo 27/05/2009, 05:25
 
Fecha de Ingreso: mayo-2009
Mensajes: 153
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menú con imágenes

Cita:
Iniciado por foroworld Ver Mensaje
La verdad es q tiene una pinta cojonuda, lo probaré.

muchísimas gracias.
Hola,

Sabes si funciona correctamente en todos los navegadore

como cuadras las coordenadas???

muchas gracias
  #13 (permalink)  
Antiguo 27/05/2009, 05:27
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: menú con imágenes

para cuadrarlas cordenadas, vas moviendo la imagen a la izquierda con el border negativo
__________________
No diseñes usando tablas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:49.