preload imagenes del menu

vkapyrina · #1 (**permalink**) 13/09/2010, 14:09

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.

emprear · #2 (**permalink**) 13/09/2010, 14:41

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

vkapyrina · #3 (**permalink**) 14/09/2010, 01:29

Muchissimas gracias, voy a probar!

vkapyrina · #4 (**permalink**) 14/09/2010, 01:46

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.

emprear · #5 (**permalink**) 15/09/2010, 15:49

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

Saludos