cargar una imagen del menu en css

angelseron · #1 (**permalink**) 20/12/2005, 13:42

buenas estoy haciendo un menu como que quedo algo bien aun falta cosas que me datearon , pero uno de ellos es el fondo de cada link, es el mino pero apsa que cuando paso por primera vez demora ne aprecer luego normal aaprce rapido, me dijeron que hay un truco para que cuando cargue la web cargue tb al toque ese imagen de fondo cosa que cuando pase el mouse no demora en cargar, algo parecido como una precarga pero de la imagen en css, este es mi css

/* menu izquierda */

.enlacesseccion {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
border: 0 1px 0 0 solid #CBC19C;
border-bottom: 1px solid #CBC19C;
margin: 5px 0px 0px 0px;
}

.enlacesseccion a {
display: block;
color: #000000;
padding-left: 10px;
background: #F2DFB7;
text-decoration: none;
border-top: 1px solid #CBC19C;
text-align: right;
padding: 3px 17px 4px 0px;
}

.enlacesseccion a:hover {
color: #9F590E;
background-color: #FFEECB;
background-image: url(../images/fon-me-prin.gif);
text-decoration: none;
font-weight: bold;
}

-------------

este el html que tiene los links

<div class="enlacesseccion">
<a href="#">About Us</a>
<a href="#">Our Philosophy</a>
<a href="#">Our Hotels</a>
<a href="#">Destination Guide</a>
<a href="#">Photo Gallery</a>
<a href="#">Peru Facts and Info</a>
<a href="#">Peru a la Carte</a>
<a href="#">Price Guarantee</a>
</div>

aqui va la url como que se ve al pasar el mouse demora un poco luego se ve normal , es el menu del lado izquierdo

http://www.peruforless.com/default_css.html

gracias

damianx · #2 (**permalink**) 20/12/2005, 22:43

que tal, la precarga de imagenes con css se me hace que no existe, si llegas a saber algo postealo que me resultaria interesante.

la solucion que encuentro es una tipica precarga en el onload del body con javascript:

Código:

<body onLoad="MM_preloadImages('images/fon-me-prin.gif');">

y el script que deberias colocar entre <head> y </head>

Código:

<script language="JavaScript">
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

Espero que te sea de alguna ayuda. Felices Fiestas.

damianx · #3 (**permalink**) 20/12/2005, 22:52

Acabo de buscar un poco acerca de la "precarga" css, y entre los muchos resultados que da google, en este sitio lo explican bastante bien.

http://www.lacoctelera.com/gigo/post...s-sin-precarga

igualmente esto no es una precarga, y no lo veo con buenos con ojos, ya que es mas que nada un "truco" que se hace utilizando herramientas que no fueron echas para eso... me quedo con el javascript, aunque es interesante saberlo ya que nunca se sabe cuando lo podras necesitar.

Saludos!

kazafun · #4 (**permalink**) 21/12/2005, 04:11

Gracias por la info damianx

angelseron · #5 (**permalink**) 21/12/2005, 10:39

gracias damianx justo eso tb me respondieron por ovillo que acudo siempre, como dices es solo un truco , gracias de todas maneras,

salu2 , felices fiestas

RoQ · #6 (**permalink**) 21/12/2005, 11:43

podrias usar una sola imagen y con la propiedad background-position creas el efecto de rollover sin que demore.
Lee este tutorial
http://baluart.net/articulo.php?id_art=2

furoya · #7 (**permalink**) 28/09/2006, 16:05

Hola a todos :

Mientras revisaba viejos disquetes buscando algún back-up de un documento perdido, apareció una copia de este mensaje junto al comentario "Responder con un ejemplo". Es evidente que la pregunta se me traspapeló (o trasdisquetó) y por eso nunca la respondí; y como no quiero seguir acumulando karma, aprovecho para hacerlo ahora (aunque estoy seguro de que angelseron ya resolvió su problema).

angelseron : supongamos que tienes dos imágenes a precargar; entonces escribes inmediatamente debajo de <body>

Código:

 <img class="precarga" src="imagen1.jpg" >
 <img class="precarga" src="imagen2.jpg" >

poniendo en cada uno de los src cada una de las rutas de tus imágenes. Ahora a los estilos agregas

Código:

.precarga {position:absolute; width:1px; height:1px; 
top:-1px; left:0; border-collapse:collapse; }

El método es más HTML que CSS, pero tengo la impresión de que funciona mejor con src que con background-image.

Y aún así el cambio del roll-over no será tan inmediato. La verdad es que a veces no lo es ni con javascript, porque puede depender de la velocidad de la máquina o de algún antivirus que esté monitoreando los programas que se ejecuten en la página.

Un método que sí es CSS es el de meter la primera imagen dentro de un span que tenga como fondo la segunda imagen; y luego con hover le asignamos visibility: hidden solamente al tag img. De éste no escribo el ejemplo porque KnowDemon ya puso uno muy parecido.(Lo descubrí usando el buscador)

Dejo una lista de enlaces relacionados.

¿Desean un rollover con precarga SIN javascript?

Cambio de imagen

rollover con css muy lentos

Diferentes MouseOver's a una Imagen

Manejo de Imágenes