Foros del Web » Creando para Internet » CSS »

Retardo al reemplazar imágenes con hover

Estas en el tema de Retardo al reemplazar imágenes con hover en el foro de CSS en Foros del Web. Hola amigos, tal como indico en el título tengo una pequeña pero notable demora en cambiar una imágen por otra al pasar por encima con ...
  #1 (permalink)  
Antiguo 30/10/2008, 14:35
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 86
Antigüedad: 18 años, 2 meses
Puntos: 2
Retardo al reemplazar imágenes con hover

Hola amigos, tal como indico en el título tengo una pequeña pero notable demora en cambiar una imágen por otra al pasar por encima con el puntero.
El código es:

#menu_ppal ul li a#respaldo{
background-image: url(../respaldo_cl.jpg);
background-repeat:no-repeat;
}
#menu_ppal ul i a#respaldo:hover {
background-image: url(../respaldo_br.jpg);
background-repeat:no-repeat;
}

y lo podrán notar en http://www.simei.com.ar

Este retardo sucede solo una vez por cada img, luego ya no porque la img de reemplazo queda cacheada. Para comprobar que las img de reemplazo no se cargan sino hasta el momento en que debe funcionar el hover podemos desconectar el cable de internet luego de cargar la página y ver que las img de reemplazo nunca aparecen.
Por lo tanto me gustaría saber si existe alguna forma de cargar las imágenes de reemplazo junto con las originales o si hay alguna manera de evitar el retardo?
Muchas gracias de antemano.
Saludos.
Javier.

Última edición por xav; 30/10/2008 a las 15:03
  #2 (permalink)  
Antiguo 30/10/2008, 15:03
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 15 años, 6 meses
Puntos: 30
Respuesta: Retardo al reemplazar imágenes con hover

Eso que te susede siempre te ocurrirá, pero puedes hacer el siguiente truco:

- En un DIV (al final del HTML) insertas las imágenes que quieras que se muestren al pasar el mouse por encima de la imagen (imágenes del efecto hover)
- A este DIV le das la propiedad CSS display:none;

Entonces al cargar la pagina, cargará las imágenes junto con el codigo fuente del html... y cuando desconectes al cable de internet... al hacer el efecto hover... resultará lo que querias (pues las imagenes se han cargado previamente).

Te doy una probabilidad de un 80% de que te funcione... el truco lo invente recien .

Suerte

PD: me gusto el diseño de la web, solo que el "bienvenido" esta muy normal... y como es una imagen, podrías editarla mejor.
  #3 (permalink)  
Antiguo 30/10/2008, 17:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Retardo al reemplazar imágenes con hover

La mejor técnica que conozco para esto es basarte en esta imagen (unir ambas imágenes en una):



La técnica aplicada es esta:

http://www.araudi.net/ejemplos/rollo..._posicion.html

que es simplísima, y se basa en la posición del fondo.

P.D.: efectivamente, un bonito diseño.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 30/10/2008, 20:59
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 86
Antigüedad: 18 años, 2 meses
Puntos: 2
Respuesta: Retardo al reemplazar imágenes con hover

Hace unas horas, para cuando me dirigí a contestarle a Null que su idea había dado un muy buen resultado ví que también Mikmoro me había respondido con algo de lo que había oído hablar pero que no recordaba. Asi que ahora les doy las gracias a ambos por su tiempo y ayuda.
Saludos cordiales.
Javier.

P.D.: Gracias por la critica del diseño. En cuanto al "Bienvenido...", que ciertamente estaba medio "pelado", probé con algunos efectos de texto que no me convencieron del todo, pero al menos por el momento lo modifiqué haciendolo de dos colores.
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 20:38.