Foros del Web » Creando para Internet » CSS »

cargar una imagen del menu en css

Estas en el tema de cargar una imagen del menu en css en el foro de CSS en Foros del Web. buenas estoy haciendo un menu como que quedo algo bien aun falta cosas que me datearon , pero uno de ellos es el fondo de ...
  #1 (permalink)  
Antiguo 20/12/2005, 13:42
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
cargar una imagen del menu en css

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
  #2 (permalink)  
Antiguo 20/12/2005, 22:43
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
Sonrisa

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.
  #3 (permalink)  
Antiguo 20/12/2005, 22:52
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
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!
  #4 (permalink)  
Antiguo 21/12/2005, 04:11
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Gracias por la info damianx
  #5 (permalink)  
Antiguo 21/12/2005, 10:39
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
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
  #6 (permalink)  
Antiguo 21/12/2005, 11:43
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #7 (permalink)  
Antiguo 28/09/2006, 17:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
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:16.