Renovación automática de imágenes en página web

Mystery · 29 Jul 2013

Hola, estoy intentando colocar un código en mi página que renueve una imagen por otra cada ciertos segundos, como simulando una webcam.

Googleando encontré uno que sirve según todo lo que leí, lo que no entiendo es como hacen para que aparesca en el código de fuente una sola "webcam.jpg" y cambie constantemente por otras imágenes manteniendo siempre el mismo nombre "webcam.jpg".

Este es el código:

Insertar CODE, HTML o PHP:

	<div style="position:relative; left: 0px; top: 0px; width: 728px; height: 520px;">
	<img width=728 height=520  src="webcam.jpg" border=0 name="tcimage0"  style="border-color:#808080" />
	<div style="position:absolute; top:0; left:0;">
	
	</div></div>

<script language="JavaScript" type="text/javascript">
    <!--
    var tcimages = new Array();
    tcimages[0] = "webcam.jpg";
    interval = 4000;
    function Refresh() {
      for (i=0; i<=0; i++) {
        tmp = new Date();
        tmp = "?" + tmp.getTime();
        document.images["tcimage" + i].src = tcimages[i] + tmp;
      }
      setTimeout("Refresh()", interval);
    }

    Refresh();
    // -->
    </script>

Cómo se hace esto? ¿en que parte se deben subir todas las imágenes y con qué nombre?

HuGo · 29 Jul 2013

Y si mejor haces un gif?

Borjasol · 29 Jul 2013

Mystery dijo:
Hola, estoy intentando colocar un código en mi página que renueve una imagen por otra cada ciertos segundos, como simulando una webcam.

Googleando encontré uno que sirve según todo lo que leí, lo que no entiendo es como hacen para que aparesca en el código de fuente una sola "webcam.jpg" y cambie constantemente por otras imágenes manteniendo siempre el mismo nombre "webcam.jpg".

Este es el código:

Insertar CODE, HTML o PHP:

<div style="position:relative; left: 0px; top: 0px; width: 728px; height: 520px;"> <img width=728 height=520 src="webcam.jpg" border=0 name="tcimage0" style="border-color:#808080" /> <div style="position:absolute; top:0; left:0;"> </div></div> <script language="JavaScript" type="text/javascript">  </script>

Cómo se hace esto? ¿en que parte se deben subir todas las imágenes y con qué nombre?

Te podría explicar ese código, es simple, pero necesitas conocer los fundamentos de programación.

HuGo dijo:
Y si mejor haces un gif?

Un gif puede ser demasiado pesado según sus necesidades.

HuGo · 29 Jul 2013

Borjasol dijo:
Un gif puede ser demasiado pesado según sus necesidades.

Creo que estar cargando muchas imágenes va resultar mucha mas pesado... Pero vamos a ver que dice el usuario :encouragement:

Mystery · 29 Jul 2013

HuGo dijo:
Y si mejor haces un gif?

Hola, si, ya lo he pensado pero son mas de 90 imágenes, un gif así tardaría muchísimo en cargar, por eso busqué el código. alguien sabe algo?

HuGo · 29 Jul 2013

Mystery dijo:
Hola, si, ya lo he pensado pero son mas de 90 imágenes, un gif así tardaría muchísimo en cargar, por eso busqué el código. alguien sabe algo?

Pero cargar 90 imágenes separadas no seria mas pesado? Por que el gif "baja" la calidad un poco para no se tan pesado :encouragement:

Mystery · 29 Jul 2013

Borjasol dijo:
Te podría explicar ese código, es simple, pero necesitas conocer los fundamentos de programación.

Un gif puede ser demasiado pesado según sus necesidades.

Hola, no había visto tu comentario. Si, se algo de programación creo que lo podría entender fácilmente.

---------- Post agregado el 29-jul-2013 hora: 17:07 ----------

HuGo dijo:
Pero cargar 90 imágenes separadas no seria mas pesado? Por que el gif "baja" la calidad un poco para no se tan pesado :encouragement:

Cada imagen pesa alrededor de 30kb, es más fácil cargar de 30 en 30 aprovechando el espacio de tiempo que hay entre una imagen y la otra(4 segundos) que varios megas a la vez.

Borjasol · 29 Jul 2013

HuGo dijo:
Creo que estar cargando muchas imágenes va resultar mucha mas pesado... Pero vamos a ver que dice el usuario :encouragement:

Si vas cargando una a una las imágenes no tiene porque haber problema (es algo que hice en webs mías), en cambio un gif de 90 imágenes es algo excesivamente pesado que tendría que tardar varios minutos para que se visualizase bien (un gif, cuando más imágenes tenga, más peso tendrá, por lo tanto más tiempo tardará en ir óptimamente, al igual que si cargas una imagen de mucha resolución inmediatamente no podrás verla completa).

---------- Post agregado el 29-jul-2013 hora: 22:33 ----------

Mystery dijo:
Hola, no había visto tu comentario. Si, se algo de programación creo que lo podría entender fácilmente.

Te simplifiqué un poco el código.

Imagínate que en la carpeta "img" tenemos varios archivos "jpg" llamados "imagen1.jpg", "imagen2.jpg", "imagen3.jpg", ... así hasta "imagen90.jpg". Lo que haría este código sería lo siguiente (es lo que está comentado en el javascript):

<div>
<img src="img/imagen1.jpg" alt="webcam" id="imagen" />
</div>

<script language="javascript" type="text/javascript">

var idx=1; // Hacemos una variable llamada idx.

function Refresh() {
document.getElementById("imagen").src="imagen"+idx+".jpg"; // Hacemos que la ruta de la imagen cambie (si idx=1 sería "imagen1.jpg" la que se vería, si fuese idx=2 sería "imagen2.jpg", etc...)
idx=idx++; // Hacemos que idx aumente un valor (idx pasaría de valer 1, a valer 2)
if (idx>90) // Si idx=91 entonces volvemos a idx=1
{
idx=1;
}
setTimeout("Refresh()", 10000); // Volvemos a llamar a la función en 10 segundos automáticamente (los valores se escriben en milisegundos de ahí lo de 10000)
}
</script>

Ya por último llamaríamos a la función, que puede ser de modo automático, por ejemplo con:

<body onload="Refresh">

Espero que te haya valido

Mystery · 29 Jul 2013

Borjasol dijo:
Si vas cargando una a una las imágenes no tiene porque haber problema (es algo que hice en webs mías), en cambio un gif de 90 imágenes es algo excesivamente pesado que tendría que tardar varios minutos para que se visualizase bien (un gif, cuando más imágenes tenga, más peso tendrá, por lo tanto más tiempo tardará en ir óptimamente, al igual que si cargas una imagen de mucha resolución inmediatamente no podrás verla completa).

---------- Post agregado el 29-jul-2013 hora: 22:33 ----------

Te simplifiqué un poco el código.

Imagínate que en la carpeta "img" tenemos varios archivos "jpg" llamados "imagen1.jpg", "imagen2.jpg", "imagen3.jpg", ... así hasta "imagen90.jpg". Lo que haría este código sería lo siguiente (es lo que está comentado en el javascript):

<div>
<img src="img/imagen1.jpg" alt="webcam" id="imagen" />
</div>

<script language="javascript" type="text/javascript">

var idx=1; // Hacemos una variable llamada idx.

function Refresh() {
document.getElementById("imagen").src="imagen"+idx+".jpg"; // Hacemos que la ruta de la imagen cambie (si idx=1 sería "imagen1.jpg" la que se vería, si fuese idx=2 sería "imagen2.jpg", etc...)
idx=idx++; // Hacemos que idx aumente un valor (idx pasaría de valer 1, a valer 2)
if (idx>90) // Si idx=91 entonces volvemos a idx=1
{
idx=1;
}
setTimeout("Refresh()", 10000); // Volvemos a llamar a la función en 10 segundos automáticamente (los valores se escriben en milisegundos de ahí lo de 10000)
}
</script>

Ya por último llamaríamos a la función, que puede ser de modo automático, por ejemplo con:

<body onload="Refresh">

Espero que te haya valido

Hola, he intentado con varias imágenes y visto el código varias veces pero no logra funcionar. Aquí está la página de prueba que hice: Screenr - dis3oqns4: prueba

Qué p uede estar fallando?

cristiancs · 29 Jul 2013

igual hacer 90 peticiones no es bueno, deberias considerar crear un sprite css.

aconrado · 29 Jul 2013

Pues mira, el código que posteas lo que hace es cambiar el source de la imagen. No sé si al cambiar la src se haga una nueva petición, pero lo que si tengo seguro es que el "truco" es que a cada petición le agregan una estampa de tiempo como parámetro, esto supongo es para lograr que no se use el cache del explorador, al estar pidiendo la misma imagen ('webcam.jpg') cada cuatro segundos.

Sobre donde debes poner las imagenes... pues en webcam.jpg... lo que pasa es que el script asume que cada vez que se haga una petición se generará una nueva imagen. Esto se puede lograr de varias formas. La que se me ocurre en este momento, es que la petició a webcam.jpg redireccione a un script de php, que ya sea basado en una variable de sesion, o en algun otro mecanismo, agarre la siguiente foto y la mande.

O sea, ese script no sirve así nada mas por si solo de lado del cliente, se necesita configuración o programación del lado del servidor para hacerlo funcionar correctamente.

YeltsinReyes · 29 Jul 2013

Agrega

HTML:

<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

o

HTML:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

En el head a ver si funcion!! XD

Mystery dijo:
Hola, he intentado con varias imágenes y visto el código varias veces pero no logra funcionar. Aquí está la página de prueba que hice: Screenr - dis3oqns4: prueba

Qué p uede estar fallando?

Mystery · 30 Jul 2013

aconrado dijo:
Pues mira, el código que posteas lo que hace es cambiar el source de la imagen. No sé si al cambiar la src se haga una nueva petición, pero lo que si tengo seguro es que el "truco" es que a cada petición le agregan una estampa de tiempo como parámetro, esto supongo es para lograr que no se use el cache del explorador, al estar pidiendo la misma imagen ('webcam.jpg') cada cuatro segundos.

Sobre donde debes poner las imagenes... pues en webcam.jpg... lo que pasa es que el script asume que cada vez que se haga una petición se generará una nueva imagen. Esto se puede lograr de varias formas. La que se me ocurre en este momento, es que la petició a webcam.jpg redireccione a un script de php, que ya sea basado en una variable de sesion, o en algun otro mecanismo, agarre la siguiente foto y la mande.

O sea, ese script no sirve así nada mas por si solo de lado del cliente, se necesita configuración o programación del lado del servidor para hacerlo funcionar correctamente.

Hola, sobre la petición a webcam.jpg redireccione a un script de php y todo lo que conlleva sabes como hacerlo?

---------- Post agregado el 30-jul-2013 hora: 00:12 ----------

YeltsinGraphs dijo:
Agrega

HTML:

<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

o

HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

En el head a ver si funcion!! XD

Hola, ya intenté con los dos códigos pero aún así no quiere andar. Puede que haya que hacer algo más para hacerlo funcionar

hugomiguel2002 · 30 Jul 2013

Quiero estudiar programacion!!! Esto me esta interesando demasiado!

---------- Post agregado el 30-jul-2013 hora: 05:52 ----------

pudieron solucionar esto?

aconrado · 30 Jul 2013

A ver, seamos claros. El código funciona del lado del cliente sin problemas. No tiene error, no hay que cambiar nada, y no usa JQuery. Además, no, no es pesado hacer una petición cada cuatro segundos. Este script está enfocado a una imagen de auto refresco para web cams de baja resolución.

Lo que falta para que funcione, es que el servidor responda. Normalmente, en una webcam, el software de la misma se encarga de poner la imagen correcta, y con ese script uno puede refrescar la imagen n el intervalo que uno quiera.

Ahora bien, para simular este efecto en un servidor apache con PHP, se usa una directiva .htaccess (suponiendo que está activado ModRewrite) en la que se ponga una regla que reescriba la URL de "webcam.jpg" a "webcam.php". En ese último archivo pondriamos algo similar a (dependiendo de la implementación):

PHP:

$archivo = '/image.jpg';
$tipo = 'image/jpeg';
header('Content-Type:'.$tipo);
ob_clean();
flush();
readfile($archivo);

Aunque, a decir verdad, ésta es demasiada vuelta para algo muy sencillo, y de hecho, Borjasol ya habia dado una solución bastante más sencilla e igual de efectiva en el post http://forobeta.com/javascript/191795-nueva-imagen-x-segs.html#post1841330

Mystery · 31 Jul 2013

aconrado dijo:
A ver, seamos claros. El código funciona del lado del cliente sin problemas. No tiene error, no hay que cambiar nada, y no usa JQuery. Además, no, no es pesado hacer una petición cada cuatro segundos. Este script está enfocado a una imagen de auto refresco para web cams de baja resolución.

Lo que falta para que funcione, es que el servidor responda. Normalmente, en una webcam, el software de la misma se encarga de poner la imagen correcta, y con ese script uno puede refrescar la imagen n el intervalo que uno quiera.

Ahora bien, para simular este efecto en un servidor apache con PHP, se usa una directiva .htaccess (suponiendo que está activado ModRewrite) en la que se ponga una regla que reescriba la URL de "webcam.jpg" a "webcam.php". En ese último archivo pondriamos algo similar a (dependiendo de la implementación):

PHP:

$archivo = '/image.jpg'; $tipo = 'image/jpeg'; header('Content-Type:'.$tipo); ob_clean(); flush(); readfile($archivo);

Aunque, a decir verdad, ésta es demasiada vuelta para algo muy sencillo, y de hecho, Borjasol ya habia dado una solución bastante más sencilla e igual de efectiva en el post http://forobeta.com/javascript/191795-nueva-imagen-x-segs.html#post1841330

Si, la solución de Borjasol parece más sencilla a comparación con la que acabas de dar que se ve también efectiva aunque habría que detallar algunas cosas que no comprendo bien.

Probé la solución de Borjasol como puse en este vídeo http://forobeta.com/javascript/191795-nueva-imagen-x-segs.html#post1841485 y no logro hacerla funcionar, parece que falta o está fallando algo.

Borjasol · 31 Jul 2013

Mystery dijo:
Si, la solución de Borjasol parece más sencilla a comparación con la que acabas de dar que se ve también efectiva aunque habría que detallar algunas cosas que no comprendo bien.

Probé la solución de Borjasol como puse en este vídeo http://forobeta.com/javascript/191795-nueva-imagen-x-segs.html#post1841485 y no logro hacerla funcionar, parece que falta o está fallando algo.

Hay algún detalle que hace que no te funcione el código según lo que vi. Prueba así, a ver si te va con el código completo:

Insertar CODE, HTML o PHP:

<html>
<head>

   <script language="javascript" type="text/javascript">

   var idx=1

   function Refresh() {
     document.getElementById("imagen").src="imagen"+idx +".jpg";
     idx=idx++;
     if (idx>90)
     {
        idx=1;
     }
     setTimeout("Refresh()", 10000);
   }
</script>

</head>

<body onload="Refresh()">
   <div>
       <img src="img/imagen1.jpg" alt="webcam" id="imagen" />
   </div>
</body>

</html>

No lo he probado pero debería ir.

También comprueba el código en la consola de errores del firefox (en "desarrollador web"). Es clara y te dirá si hay que corregir algún fallo.

aconrado · 2013-08-01T13:16:40-0500

El último código de Borjasol sí tiene un pequeño error. Se podría alegar que es lo mismo, pero no.

El error está en la segunda linea de la función Refresh. Dice:

Insertar CODE, HTML o PHP:

idx=idx++;

debería de decir:

Insertar CODE, HTML o PHP:

idx++;

La razón de pq con la primera forma no funciona y de la segunda sí, es un poco técnica, así que la omitiré en este post, pero la daré si se me requiere.

Ya con la linea cambiada, suponemos que el archivo html se encuentra en el directorio raíz, entonces también ahí debe haber un directorio llamado 'img', que contenga imágenes llamadas "imagenX.jpg" donde X es un número positivo, en este caso menor a 90. Ya con eso debería de jalar el asunto.

Mystery · 2013-08-02T16:42:10-0500

aconrado dijo:
El último código de Borjasol sí tiene un pequeño error. Se podría alegar que es lo mismo, pero no.

El error está en la segunda linea de la función Refresh. Dice:

Insertar CODE, HTML o PHP:

idx=idx++;

debería de decir:

Insertar CODE, HTML o PHP:

idx++;

La razón de pq con la primera forma no funciona y de la segunda sí, es un poco técnica, así que la omitiré en este post, pero la daré si se me requiere.

Ya con la linea cambiada, suponemos que el archivo html se encuentra en el directorio raíz, entonces también ahí debe haber un directorio llamado 'img', que contenga imágenes llamadas "imagenX.jpg" donde X es un número positivo, en este caso menor a 90. Ya con eso debería de jalar el asunto.

Hola, he hecho los cambios pertinentes y aún así sigue sin funcionar el código. Agredecería si alguno del foro podría hacer la prueba para verificar si soy yo el que está haciendo las cosas mal.

aconrado · 2013-08-03T20:22:28-0500

Yo usé el siguiente código, que es el de Borjasol con la modificación que mencione,

HTML:

<html>
<head>

   <script language="javascript" type="text/javascript">

   var idx=1

   function Refresh() {
     document.getElementById("imagen").src="imagen"+idx +".jpg";
     idx++;
     if (idx>90)
     {
        idx=1;
     }
     setTimeout("Refresh()", 10000);
   }
</script>

</head>

<body onload="Refresh()">
   <div>
       <img src="img/imagen1.jpg" alt="webcam" id="imagen" />
   </div>
</body>

</html>

Y sí sirve.

¿Ya tienes el sitio en algún lado? ¿O lo estás haciendo en tu compu?.

A mi se me hace que no estás nombrando correctamente las imágenes, o que no las estás poniendo en la carpeta "img".