Entrar

Problemilla en la colocación de unas imagenes en un div usando javascript

paxarin · · Solicitar retirada
Muy buenas.
Nuevamente aqui estoy un poco liado con una script.
haber este script es para cambiar fotos/imagenes dentro de un div de la web, pero cuando refresco la pagina en lugar de aparecer dentro del div aparece en el header y no soy capaz usando document.getElementById("dest"); de hacer que se posicione y ya no se que es lo que estoy haciendo mal.
haber si alguien me puede hechar un cable.
Aqui os dejo el codigo.

<script>
<!--
// Cargamos al principio las imágenes
var imgNum=0;
var totalImagenes=2;
imagenes=new Array();
for ( i=0; i<totalImagenes; i++ ) {
imagenes=new Image();
imagenes.src="foto/imagen"+i+".jpg"
} // for

// Esta es la funcion que cambia los graficos
function graficosAnimados() {
document.images[0].src=imagenes.src;
**document.getElementById("dest");**
if( imgNum<totalImagenes-1 ) {
imgNum++;
} else {
imgNum=0;
}
setTimeout( "graficosAnimados();",4000);
} // function graficosAnimados
// -->
</script>
**= intento de que las imagenes cambiaran en el div "dest".
En el html la etiqueta body hace que una vez cargada la web comienze el movimiento de las imagenes.
<body onLoad="graficosAnimados();">
Probe a poner el onload en el div como cuando se llama a una función de validación cuando se quiere validar el formulario, pero tampoco.
La verdad que llevo toda la tarde dandole vueltas y no se me ocurre que probar.
Alguien puede echarme un ojo al codigo?
Yaneth · · Solicitar retirada
hola
de java yo se muuuy poco
primer pregunta
este codigo lo realizaste tu desde 0????
o bien lo tomaste de algun lado??

saludos
skaparate · · Solicitar retirada
Hola:

Según tu script, no es necesario utilizar la línea que publicaste document.getElementById("dest");, pues esta línea document.images[0].src =imagenes.src; le dice a javascript que cambie la primera imagen por la que se encuentre en el arreglo (o array) con el índice imgNum. En otras palabras, piensa en esta página:

<html>
  <head>
    <title>Cambiando imágenes con Javascript</title>
    <script type="text/javascript">
      var imgNum = 0;
      var totalImagenes = 2;
      imagenes = new Array();

      for ( i=0; i<totalImagenes; i++ ) {
        imagenes[i]=new Image();
        imagenes[i].src="foto/imagen"+i+".jpg"
      }

      // Esta es la funcion que cambia los graficos
      function graficosAnimados() {
        document.images[0].src = imagenes[imgNum].src;
        if( imgNum<totalImagenes-1 ) {
          imgNum++;
        } else {
          imgNum=0;
        }
        setTimeout( "graficosAnimados();",4000);
      }
    </script>
  </head>
 
  <body>
    <div id="main">
	<div id="head">
	  <img src="imagenes/logo.png" title="Mi logo" alt="Mi logo" /><!-- Solo cambiarás esta imagen -->
	</div>
	<div id="content">
	<div id="galeria">
	  <img src="imagenes/img1.png" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img2.png" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img3.png" title="img3.png" alt="img3.png" />
	</div>
	<div id="fotos-amigos">
	  <img src="imagenes/img1.png" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img2.png" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img3.png" title="img3.png" alt="img3.png" />
	</div>
      </div>
    </div>
  </body>
</html>

Al ejecutar el script, sólo cambiaras la primera imagen del documento; en caso del código html anterior, sólo cambiaras la imagen del logo. Entonces, para que funcione como quieres, tienes que decirle a javascript dónde o qué imágenes quieres que cambien.

En este momento tengo que salir, pero cuando vuelva te ayudo a corregir el problema. Si quieres, busca en google sobre cómo obtener los sub-nodos de un nodo con javascript.

Saludos.
paxarin · · Solicitar retirada
skaparate escribió:Hola:

Según tu script, no es necesario utilizar la línea que publicaste document.getElementById("dest");, pues esta línea document.images[0].src =imagenes.src; le dice a javascript que cambie la primera imagen por la que se encuentre en el arreglo (o array) con el índice imgNum. En otras palabras, piensa en esta página:

<html>
  <head>
    <title>Cambiando imágenes con Javascript</title>
    <script type="text/javascript">
      var imgNum = 0;
      var totalImagenes = 2;
      imagenes = new Array();

      for ( i=0; i<totalImagenes; i++ ) {
        imagenes[i]=new Image();
        imagenes[i].src="foto/imagen"+i+".jpg"
      }

      // Esta es la funcion que cambia los graficos
      function graficosAnimados() {
        document.images[0].src = imagenes[imgNum].src;
        if( imgNum<totalImagenes-1 ) {
          imgNum++;
        } else {
          imgNum=0;
        }
        setTimeout( "graficosAnimados();",4000);
      }
    </script>
  </head>
 
  <body>
    <div id="main">
	<div id="head">
	  <img src="imagenes/logo.png" title="Mi logo" alt="Mi logo" /><!-- Solo cambiarás esta imagen -->
	</div>
	<div id="content">
	<div id="galeria">
	  <img src="imagenes/img1.png" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img2.png" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img3.png" title="img3.png" alt="img3.png" />
	</div>
	<div id="fotos-amigos">
	  <img src="imagenes/img1.png" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img2.png" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img3.png" title="img3.png" alt="img3.png" />
	</div>
      </div>
    </div>
  </body>
</html>

Al ejecutar el script, sólo cambiaras la primera imagen del documento; en caso del código html anterior, sólo cambiaras la imagen del logo. Entonces, para que funcione como quieres, tienes que decirle a javascript dónde o qué imágenes quieres que cambien.

En este momento tengo que salir, pero cuando vuelva te ayudo a corregir el problema. Si quieres, busca en google sobre cómo obtener los sub-nodos de un nodo con javascript.

Saludos.
Muchas gracias por tu respuesta.
Si luego puedes hecharme un cable te lo agradecere, de todas formas me quedo investigando un poco haber que pasa.
Un saludo
paxarin · · Solicitar retirada
Yaneth escribió:hola
de java yo se muuuy poco
primer pregunta
este codigo lo realizaste tu desde 0????
o bien lo tomaste de algun lado??

saludos
Hecho poco a poco, revisando tutoriales, etc.
skaparate · · Solicitar retirada
He vuelto... Si aún no lo resuelves, te dejo un código funcionando con lo que tú ya habías hecho:

<html>
  <head>
    <title>Cambiando imágenes con Javascript</title>
    <style type="text/css" rel="stylesheet" media="all"><!-- Esto es innecesario, solo lo puse para distinguir las imágenes y las capas (div) -->
	div {
	  border: 1px solid black;
	  padding: 3px;
	}
    </style>
    <script type="text/javascript">
      var imgNum = 0;
      var totalImagenes = 2;
      imagenes = new Array(totalImagenes);

      for (var i = 0; i < imagenes.length; i++) {
        imagenes[i] = new Image();
        imagenes[i].src = "imagenes/img" + i + ".jpg"
      }

      // Esta es la funcion que cambia los graficos
      function graficosAnimados() {
	try {
	  var img = document.getElementById('fotos-cambiantes').getElementsByTagName('img')[0];
	  img.src = imagenes[imgNum].src; // Esta línea simplemente copia el src de imagenes[N] al src del elemento HTML img 
	  
          if(imgNum < imagenes.length - 1) {
	    imgNum++;
	  } else {
	    imgNum = 0;
	  }
	  setTimeout('graficosAnimados();', 4000);
	} catch(error) {
	  console.log(error + '\n\nimgNum: ' + imgNum);
	}
      }
    </script>
  </head>
 
  <body onload="javascript:graficosAnimados()">
    <div id="main">
	<div id="head">
		<p>Cabecera</p>
	  <img src="imagenes/logo.jpg" title="Mi logo" alt="Mi logo" /><!-- Solo cambiarás esta imagen -->
	</div>
	<div id="content">
	<div id="galeria">
		<p>Galeria</p>
	  <img src="imagenes/img0.jpg" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img1.jpg" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img2.jpg" title="img3.png" alt="img3.png" />
	</div>
	<div id="fotos-amigos">
		<p>Fotos amigos</p>
	  <img src="imagenes/img0.jpg" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img1.jpg" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img2.jpg" title="img3.png" alt="img3.png" />
	</div>
  <div id="fotos-cambiantes">
		<img src="imagenes/img0.jpg" title="img1.jpg" alt="img1.jpg" />
  </div>
  </div>
  </div>
  </body>
</html>

Yo utilicé una carpeta (llamada test - original) con un archivo index.html y una carpeta imagenes (sin tilde) dentro de test con 3 imágenes dentro (sacadas de google, las primeras que encontré).

La siguiente línea (descartando la envoltura try {} catch() {}) es la que cambié:

var img = document.getElementById('fotos-cambiantes').getElementsByTagName('img')[0];

Esta línea le dice a javascript algo como "dame el primer objeto img (getElementsByTagName('img')[0] - cero es el primer elemento, no 1) dentro del elemento X (div, p, span, h1, etc.) cuyo id (<div id=""></div>) sea fotos-cambiantes"; el elemento no debe ser, necesariamente, un div, podría ser un <p>, un <span>, etc.. También podrías cambiar las fotos de la galería (según mi ejemplo), aunque sería algo más de trabajo (la base ya esta lista).

Espero que te quede claro. Si hay algo que no entendiste, pues preguntas :D.

Saludos.
paxarin · · Solicitar retirada
skaparate escribió:He vuelto... Si aún no lo resuelves, te dejo un código funcionando con lo que tú ya habías hecho:

<html>
  <head>
    <title>Cambiando imágenes con Javascript</title>
    <style type="text/css" rel="stylesheet" media="all"><!-- Esto es innecesario, solo lo puse para distinguir las imágenes y las capas (div) -->
	div {
	  border: 1px solid black;
	  padding: 3px;
	}
    </style>
    <script type="text/javascript">
      var imgNum = 0;
      var totalImagenes = 2;
      imagenes = new Array(totalImagenes);

      for (var i = 0; i < imagenes.length; i++) {
        imagenes[i] = new Image();
        imagenes[i].src = "imagenes/img" + i + ".jpg"
      }

      // Esta es la funcion que cambia los graficos
      function graficosAnimados() {
	try {
	  var img = document.getElementById('fotos-cambiantes').getElementsByTagName('img')[0];
	  img.src = imagenes[imgNum].src; // Esta línea simplemente copia el src de imagenes[N] al src del elemento HTML img 
	  
          if(imgNum < imagenes.length - 1) {
	    imgNum++;
	  } else {
	    imgNum = 0;
	  }
	  setTimeout('graficosAnimados();', 4000);
	} catch(error) {
	  console.log(error + '\n\nimgNum: ' + imgNum);
	}
      }
    </script>
  </head>
 
  <body onload="javascript:graficosAnimados()">
    <div id="main">
	<div id="head">
		<p>Cabecera</p>
	  <img src="imagenes/logo.jpg" title="Mi logo" alt="Mi logo" /><!-- Solo cambiarás esta imagen -->
	</div>
	<div id="content">
	<div id="galeria">
		<p>Galeria</p>
	  <img src="imagenes/img0.jpg" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img1.jpg" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img2.jpg" title="img3.png" alt="img3.png" />
	</div>
	<div id="fotos-amigos">
		<p>Fotos amigos</p>
	  <img src="imagenes/img0.jpg" title="img1.png" alt="img1.png" />
	  <img src="imagenes/img1.jpg" title="img2.png" alt="img2.png" />
	  <img src="imagenes/img2.jpg" title="img3.png" alt="img3.png" />
	</div>
  <div id="fotos-cambiantes">
		<img src="imagenes/img0.jpg" title="img1.jpg" alt="img1.jpg" />
  </div>
  </div>
  </div>
  </body>
</html>

Yo utilicé una carpeta (llamada test - original) con un archivo index.html y una carpeta imagenes (sin tilde) dentro de test con 3 imágenes dentro (sacadas de google, las primeras que encontré).

La siguiente línea (descartando la envoltura try {} catch() {}) es la que cambié:

var img = document.getElementById('fotos-cambiantes').getElementsByTagName('img')[0];

Esta línea le dice a javascript algo como "dame el primer objeto img (getElementsByTagName('img')[0] - cero es el primer elemento, no 1) dentro del elemento X (div, p, span, h1, etc.) cuyo id (<div id=""></div>) sea fotos-cambiantes"; el elemento no debe ser, necesariamente, un div, podría ser un <p>, un <span>, etc.. También podrías cambiar las fotos de la galería (según mi ejemplo), aunque sería algo más de trabajo (la base ya esta lista).

Espero que te quede claro. Si hay algo que no entendiste, pues preguntas :D.

Saludos.

Muchas gracias por este script modificado y operativo que es lo importante.
Finalmente ayer en la tarde despues de recibir tu anterior post, busque por internet y consegui hacer que funcione.
Este es el resultado:
<!--
// Cargamos al principio las imágenes
var imgNum=0;
var totalImagenes=2;
imagenes=new Array();
for ( i=0; i<totalImagenes; i++ ) {
imagenes=new Image();
imagenes.src="foto/imagen"+i+".jpg"
} // for

// Esta es la funcion que cambia los graficos
function graficosAnimados() {
document.images["tres"].src=imagenes.src;
if( imgNum<totalImagenes-1 ) {
imgNum++;
} else {
imgNum=0;
}
setTimeout( "graficosAnimados();",4000);
} // function graficosAnimados
// -->
</script>
<div id="dest">
<img src="foto/imagen0.jpg" name="tres">

</div>
Le puse la etiqueta name a la primera imagen que queria mover y solucionado.
De todas formas me lo guardo para un futuro.
Un saludo.
skaparate · · Solicitar retirada
No lo guardes, utiliza el tuyo, pues es lo mismo y tiene más valor por haberlo hecho por tu cuenta :D.
paxarin · · Solicitar retirada
skaparate escribió:No lo guardes, utiliza el tuyo, pues es lo mismo y tiene más valor por haberlo hecho por tu cuenta :D.

Ya esta en uso.
Pero muchas gracias sobre todo por tú ayuda, que el javascript para mi es vastante complicado.