Mostrar imagnes aleatorias que cambian

Joystickoso · #1 (**permalink**) 07/10/2009, 16:46

Hola gente, estoy intentando mostrar en una capa una imagen aleatoria que va cambiando cada X tiempo. Las rutas de las imagenes las tengo en una base de datos.
El registro sería:

Código PHP:

  mysql_select_db($database_comentarios, $comentarios);
$query_depedo = "SELECT * FROM galdepedo";
$depedo = mysql_query($query_depedo, $comentarios) or die(mysql_error());
$row_depedo = mysql_fetch_assoc($depedo);
$totalRows_depedo = mysql_num_rows($depedo);

Y el script:

Código:

<script type="text/javaScript">
    var imagenespedo = new Array();
	<?php
for ($i=0, $total = count($row_depedo[indice]);$i<=$total; $i++){
echo "imagenespedo[".$i."] = '".$row_depedo[ruta]."';";}?>
numPosibilidades = <?php count($row_depedo[indice]);?> - 0;
	function cambiaimagen(){ 
    document.getElementById('imgpedo').innerHTML=('<img src="'+imagenespedo[parseInt(Math.random() *numPosibilidades)]+'" width="50%" height="50%" alt="Depedo" />');}

</script>

Luego hago que se repita con
<body onload"setInterval(cambiaimagen,10000)"
La capa:

Código HTML:

<p>Imagenes que cambian aleatoriamente:</p><br><div id="imgpedo"></div>

Pero no me muestra una imagen aleatoria sino que muestra la primera imagen del registro. Seguramente será algo que hago mal al definir el array imagenespedo de la primera linea del script. Llevo bastantes pruebas hechas y no lo consigo, me gustaria saber que hago mal o si es que lo estoy haciendo muy complicado cuando hay alguna manera mas facil.
Sobra decir que acabo de empezar a enredar con esto del javascript.
Gracias y Salud'Os!!

deirdre · #2 (**permalink**) 07/10/2009, 18:00

Hola Joystickoso

Mira si te sirve este script:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cambio aleatorio de imagen al cargar la pagina</title>
</head>

<body>
<div style="">
<script type="text/javascript">
function ver_imagen()
{
n=0;
this[n++]="http://farm3.static.flickr.com/2235/2169132446_f272e62af5.jpg";
this[n++]="http://farm4.static.flickr.com/3053/2556446142_f0d4639ca8.jpg";
this[n++]="http://farm2.static.flickr.com/1180/1438562490_2d8bee44fd.jpg"
this.N=n;
}
var imagen=new ver_imagen();
src= imagen[ Math.floor(Math.random() * imagen.N) ] ;
document.write("<img src="+src+">");
</script>
</div>
</body>

</html>

Bye

loncho_rojas · #3 (**permalink**) 07/10/2009, 19:06

Esto tambien puede funcionar

Código PHP:

  <html><head>
<script language="JavaScript">
var U=1;
var tvl=setInterval("A()",1000);
function A()
{
var url="ima"+U+".jpg";
document.getElementById('im').src=url;
U++;
if(U>5) {U=0;}
}

</script>
</head>
<body>
<img id="im" src="ima1.jpg">
</body>
</html>

Joystickoso · #4 (**permalink**) 08/10/2009, 09:32

A gusto, los probaré, pero como puedo usar el registro de la base de datos de las rutas de las imagenes $row_depedo['ruta'] o el indice $row_depedo['indice'] dentro del javascript?
Mas que nada por no tener que escribir todas las rutas de las imagenes que son muchas.
No se si me explico.
Gracias y Salud'Os!!!