Imagen antes de todo

alparkomcom · #1 (**permalink**) 21/07/2010, 14:29

Hola, necesito ayuda:

tengo campos div:

<div>Este es el div</div>

Pero que antes de que salga ese texto tenga que salir una imagen, para que de la impresin de que cargo la imagen, con una imagen que diga cargando...

gracias de antemano

danistrein · #2 (**permalink**) 21/07/2010, 19:23

Código HTML:

Ver original<div>
<div id="texto" style="display: none;">AKI EL TEXTO</div>
<div id="imagen" style="display: none;">AKI LA IMAGEN</div>
</div>
<a href="" onclick="cargar('texto','imagen');">Click Para Cargar</a>

Código Javascript:

Ver originalfunction cargar(a,b){
var div=document.getElementId(a);
var imagen=document.getElementId(b);
imagen.style.display="block";
setTimeout('imagen.style.display="none";div.style.display="block";' ,1000*15);
return false;
}

:P lo hice asi nomas espero que te sirba(no lo eh probado pruevalo tu), tienes 2 formas de hacer lo que quieres hacer: una es la que te pase y la otra es usando ajax que recarga dinamicamente el contenido de otra pagina

,

_cronos2 · #3 (**permalink**) 22/07/2010, 08:32

Si necesitas ser más exacto puedes usar esto, pero si el texto se carga en seguida (que sería lo normal) la imagen no aparecerá prácticamente.

Código Javascript:

Ver originalfunction cargar(a, b){
var cargando = document.getElementById(a);
var haCargado = document.getElementById(b);
haCargado.style.display = 'none';
haCargado.onload =
 cargando.style.display = 'none';
 haCargado.style.display = 'block';
 alert('Ha cargado');
}

Saludos (:

alparkomcom · #4 (**permalink**) 23/07/2010, 12:48

Cita:

Iniciado por danistrein

Código HTML:

Ver original<div>
<div id="texto" style="display: none;">AKI EL TEXTO</div>
<div id="imagen" style="display: none;">AKI LA IMAGEN</div>
</div>
<a href="" onclick="cargar('texto','imagen');">Click Para Cargar</a>

Código Javascript:

Ver originalfunction cargar(a,b){
var div=document.getElementId(a);
var imagen=document.getElementId(b);
imagen.style.display="block";
setTimeout('imagen.style.display="none";div.style.display="block";' ,1000*15);
return false;
}

:P lo hice asi nomas espero que te sirba(no lo eh probado pruevalo tu), tienes 2 formas de hacer lo que quieres hacer: una es la que te pase y la otra es usando ajax que recarga dinamicamente el contenido de otra pagina

,

no me funciona ese :S

alparkomcom · #5 (**permalink**) 23/07/2010, 12:49

Cita:

Iniciado por _cronos2

Si necesitas ser más exacto puedes usar esto, pero si el texto se carga en seguida (que sería lo normal) la imagen no aparecerá prácticamente.

Código Javascript:

Ver originalfunction cargar(a, b){
var cargando = document.getElementById(a);
var haCargado = document.getElementById(b);
haCargado.style.display = 'none';
haCargado.onload =
 cargando.style.display = 'none';
 haCargado.style.display = 'block';
 alert('Ha cargado');
}

Saludos (:

y este no me gusta esa alerta que envia, y al pinchar en aceptar se va el contenido del div.

danistrein · #6 (**permalink**) 23/07/2010, 14:19

hola alparkomcom, lo siento yo me equiboque, mira aki esta el error.
reemplaza en el codigo js:

Código Javascript:

Ver originalgetElementId

por:

Código Javascript:

Ver originalgetElementById

Asi andara bien,

alparkomcom · #7 (**permalink**) 23/07/2010, 16:24

Cita:

Iniciado por danistrein

hola alparkomcom, lo siento yo me equiboque, mira aki esta el error.
reemplaza en el codigo js:

Código Javascript:

Ver originalgetElementById

por:

Código Javascript:

Ver originalgetElementById

Asi andara bien,

es lo mismo :S

ClubIce · #8 (**permalink**) 23/07/2010, 17:29

Código HTML:

Ver original<HTML>
 <HEAD>
  <STYLE>#overLayer {
  width:100%;
  height:100%;
  position:absolute;
  left:0,
  top:0
}
BODY {overflow:hidden}</STYLE>
<SCRIPT>
window.onload = function {
  document.getElementById('overLayer').style.display="none"
  document.body.style.overflow="auto"
}</SCRIPT>
<DIV ID="overLayer">AQUI LA IMAGEN</DIV>
</HEAD>
.......luego el resto del HTML.......

alparkomcom · #9 (**permalink**) 23/07/2010, 19:17

Cita:

Iniciado por ClubIce

Código HTML:

Ver original<HTML>
 <HEAD>
  <STYLE>#overLayer {
  width:100%;
  height:100%;
  position:absolute;
  left:0,
  top:0
}
BODY {overflow:hidden}</STYLE>
<SCRIPT>
window.onload = function {
  document.getElementById('overLayer').style.display="none"
  document.body.style.overflow="auto"
}</SCRIPT>
<DIV ID="overLayer">AQUI LA IMAGEN</DIV>
</HEAD>
.......luego el resto del HTML.......

eso no era nada lo que queria :O

queria que la imagen salga durante algunos segundos solamente. No todo el rato

danistrein · #10 (**permalink**) 24/07/2010, 03:26

jeje lo siento eh vuelto a escribir mal el codigo jeje:
esto:

Código Javascript:

Ver originalgetElementId

por esto:

Código Javascript:

Ver originalgetElementById