[SOLUCIONADO] como poner Imagen de Cargando ... sobrepuesta?

[leonimadrid]

Buenas.

Pido disculapas si no va en esta secciòn mi pregunta, ya que lo mismo tiene mas que ver con java.

Tengo este codigo java y html para hacer una precarga de una pagina , funciona muy bien , y cuando la pagina ha terminado de cargar , la imagen de carga desaparece sola.

El problema es que la imagen de carga aparece de la siguiente manera en la web insertada.




Y quiero que me haga esto otro; que salga superpuesto a la pagina. como la imagen montada al frente.




He buscado en google y no he encontrado exactamente lo que quiero, tampoco se como se llama esta propiedad para poder buscarlo en google o si se aplica a la imagen html o si se aplica a css.

Este el el codigo en Html.

Código HTML:

<div id="imgLOAD" style="text-align:center;">
<b>Cargando...</b>
<img src="images/cargando.gif" />
</div>
 

Este el codigo java.

Código Java:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>
 

Gracias y saludos.

[pzin]

Es una cuestión más bien de CSS.

Puedes especificar que tenga una posición absoluta ese elemento y hacer algo así:

Código CSS:

#imgLOAD {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -99px 0 0 -66px;
}
 

En este caso, 99 corresponde a la altura del elemento divido entre dos, y 66 al ancho dividido entre dos. Obviamente son valores ficticios, ya lo adaptas a lo que necesites. Es para que se vea centrado.

Si usas CSS modernillo, puedes hacer:

Código CSS:

#imgLOAD {
  position: absolute;
  top: calc(50% - 99px);
  left: calc(50% - 66px);
}
 

Otra cosa importante; JavaScript es JavaScript. Java es otra cosa totalmente distinta que nada tiene que ver.

[leonimadrid]

Iniciado por pzin

Es una cuestión más bien de CSS.

Puedes especificar que tenga una posición absoluta ese elemento y hacer algo así:

Código CSS:

#imgLOAD {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -99px 0 0 -66px;
}
 

En este caso, 99 corresponde a la altura del elemento divido entre dos, y 66 al ancho dividido entre dos. Obviamente son valores ficticios, ya lo adaptas a lo que necesites. Es para que se vea centrado.

Si usas CSS modernillo, puedes hacer:

Código CSS:

#imgLOAD {
  position: absolute;
  top: calc(50% - 99px);
  left: calc(50% - 66px);
}
 

Otra cosa importante; JavaScript es JavaScript. Java es otra cosa totalmente distinta que nada tiene que ver.

Hola Pzin! que rapidez!! :)

Gracias por aclararme todo, estoy de novato aprendiendo....

He probado tu codigo css en una pagina de prueba y funciona bie, centrado y por encima de una imagen.

Pero en la web que estoy probando, tiene un slyde y la imagen de cargando se queda escondida por detras del slyde, el slyde tiene un css, seguro que es por eso, tendre que poner tu codigo css en la misma hoja de Slyde.css, mañana sigo probando.

[leonimadrid]

Hola Pzin! que rapidez!! :)

Gracias por aclararme todo, estoy de novato aprendiendo....

He probado tu codigo css en una pagina de prueba y funciona bie, centrado y por encima de una imagen.

Pero en la web que estoy probando, tiene un slyde y la imagen de cargando se queda escondida por detras del slyde, el slyde tiene un css, seguro que es por eso, tendre que poner tu codigo css en la misma hoja de Slyde.css, mañana sigo probando.

Me auto respondo:

He probado en la Hoja de stilos del slider y no funciona.

[pzin]

Seguramente haga falta un z-index:

Código CSS:

#imgLOAD {
  position: absolute;
  top: calc(50% - 99px);
  left: calc(50% - 66px);
  z-index: 1000;
}
 

[leonimadrid]

Iniciado por pzin

Seguramente haga falta un z-index:

Código CSS:

#imgLOAD {
  position: absolute;
  top: calc(50% - 99px);
  left: calc(50% - 66px);
  z-index: 1000;
}
 

Eres una maquina!! tema solucionado!

He puesto este otro codigo el primero que pusiste, y he ajustado un poco el margin para que quede centrado, el segundo codigo que me diste mas moderno en IE8 se queda posicionado al lado izquierdo superior.

Este codigo es el que funciona en todos los navegadores bien.

Código CSS:

#imgLOAD {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -90px 0 0 -150px;
  z-index: 1000;
  {
 

Gracias una vez mas! que tengas buen dia.