Foros del Web » Creando para Internet » HTML »

preload imagenes del menu

Estas en el tema de preload imagenes del menu en el foro de HTML en Foros del Web. Hola a todos, Tengo los elementos de menu con imagenes. El cliente exige una fuente especial y no hay otra forma que crear imagen por ...
  #1 (permalink)  
Antiguo 13/09/2010, 15:09
 
Fecha de Ingreso: junio-2008
Mensajes: 42
Antigüedad: 9 años, 5 meses
Puntos: 3
preload imagenes del menu

Hola a todos,

Tengo los elementos de menu con imagenes. El cliente exige una fuente especial y no hay otra forma que crear imagen por cada item del menu.

El problema es cuando se ejecuta eveto over (pasas el raton por el elemento del menu) se carga otra imagen, y al hacer roll out vuelve a aparecer la inicial. Lo hago con JS y funciona, pero tarda bastante en aparecer la segunda imagen, aunque pesa 1KB cada una. No me es posible disminuir mas el tamaño.

No se si hay alguna forma obligar a precargar imagenes antes de que se cargase la web para que el menu funcione correctamente?

Gracias a todos.
  #2 (permalink)  
Antiguo 13/09/2010, 15:41
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: preload imagenes del menu

Con Javascript

<script type="text/javascript">
function preCargar() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
}
</script>

y en el body

<body onLoad="preCarga ('1.gif', '2.gif', '3.gif')">




con Css:

<style type="text/css">
img.precarga {display:none;}
</style>

y en el Body:

<img src="1.gif" alt="" height="350" width="350" class="precarga" />
<img src="1.gif" alt="" height="350" width="350" class="precarga" />
<img src="1.gif" alt="" height="350" width="350" class="precarga" />


aumque resulta extraña la demora teniendo en cuenta el tamaño que indicas. Habría que revisar como estás haciendo el efecto "hover"

Si la fuente especial es un ttf, podés usar la propiedad fontface de css.
finalmente si usas imágenes, te recomiendo este sistema que utiliza 1 sola imagen por cada elemento del menu.

http://foros.emprear.com/css/rollove...ver-input.html

(te aclaro que en mi demo use un tag input, pero el sistema es aplicable a cualquier otro) usa background-image y de ser necesario un gif transparente de 1x1 px)

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 14/09/2010, 02:29
 
Fecha de Ingreso: junio-2008
Mensajes: 42
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: preload imagenes del menu

Muchissimas gracias, voy a probar!
  #4 (permalink)  
Antiguo 14/09/2010, 02:46
 
Fecha de Ingreso: junio-2008
Mensajes: 42
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: preload imagenes del menu

Lo de los imagenes posicionando con Css no sirve, porque los imagenes de los items del menu se cargan dinamicamente en funcion de idioma y yo no puedo parametrizar el background dentro de los ficheros css sino por javascript. Las imagenes son png transparentes, porque el fondo de la web hay que respetar, con lo cual el texto es el que va en imagenes.
  #5 (permalink)  
Antiguo 15/09/2010, 16:49
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: preload imagenes del menu

Hola:
usas PHP? en funcion de que cargas el idioma?
porque si usas php si podes pasar parámetros al css

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: imagenes, preload
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:25.