Rotador de Imagen

bNd170 · #1 (**permalink**) 12/06/2010, 01:50

Buenas foreros, tengo una dudilla que espero podais resolverme.

El caso es que tengo un box en el cual quiero mostrar 5 imagenes de 5 articulos de una web, cada cual linkeando a su respectivo articulo, he probado de varias formas pero creo que para ahorrar espacio y hacerlo llamativo es la mejor forma, haciendo una rotacion de imagenes.

No encuentro el problema y la consola de errores me muestra un estupendo "is not defined" refiriendose al div en el que quiero insertar el rotativo.

Código PHP:

Ver original// articles_list.php
<script type="text/javascript">
var image = Array();
var link = Array();
var pos = 0;
<?php
    $sql = mysql_query("SELECT * FROM article ORDER BY id DESC LIMIT 5") or die(mysql_error());
    $x = 0;
    while($row = mysql_fetch_assoc($sql)) {
        if($x==0)
            $img_p = $row[img_p];
?>
        image[<?php echo $x; ?>] = "<?php echo $row[img_p]; ?>";
        link[<?php echo $x; ?>] = "<?php echo $row[link]; ?>";
<?php
    $x++;
    }
?>
function tag(id) {
    return document.getElementById(id);
}
 
function rotaImagen(pos) {
    tag('linker').href = link[pos];
    tag('imager').src = image[pos];
    pos++;
    setTimeout("rotaImagen("+pos+")",5000);
}
rotaImagen(pos);
</script>
<tr>
   <td>
<a id="linker"><img id="imager" src="<?php echo $img_p; ?>">
   </td>
</tr>

Seguramente sea algun fallo tonto pero llevo dos horas probando cosas y nada, me sigue saltando el fallo de consola.

¿Alguna sugerencia?

caricatos · #2 (**permalink**) 12/06/2010, 02:47

Hola:

En principio no veo que cierres el tag <a id="linker"...>

También tienes que considerar que se te va a acabar los elementos del array (no creo que sea error ahora, pero lo será...)

Y por último, procura usar solo lo que recibe el navegador (ver código fuente)

Saludos

bNd170 · #3 (**permalink**) 12/06/2010, 02:55

Código HTML:

Ver original<script type="text/javascript"> 
var image = Array();
var link = Array();
var pos = 0;
        image[0] = "http://www.team-giants.com/images/upload/1269441285-entrevista sergix.jpg";
        link[0] = "";
        image[1] = "1";
        link[1] = "";
function tag(id) {
    return document.getElementById(id);
}
 
function rotaImagen(pos) {
    tag('linker').href = link[pos];
    tag('imager').src = image[pos];
    pos++;
    setTimeout("rotaImagen("+pos+")",5000);
}
rotaImagen(pos);
</script> 
<body> 
<a id="linker"><img id="imager" src="imagen_DB.jpg"></a> 
</body>

Sigue dando el mismo puñetero error, porcierto, el cierre de la etiqueta <a> era fallo de copiado

Panino5001 · #4 (**permalink**) 12/06/2010, 03:01

El intérprete procesa desde arriba hacia abajo, línea por línea. Cuando llega a la línea 20 ejecuta lo que le indicás, pero el problema es que no encuentra el objeto cuyo id es linker, simplemente porque todavía no lo leyó.
Cambia esto:

Código PHP:

  rotaImagen(pos);

por esto:

Código PHP:

  onload=function(){rotaImagen(pos);}

Eso hará que sólo ejecute cuando ya haya sido leído todo el html.

caricatos · #5 (**permalink**) 12/06/2010, 03:03

Ya... creo que lo ví...

Aparte de lo comentado, debes hacerlo con la página cargada para que los tag existan:

window.onload = function() {rotaImagen(0)}

caricatos · #6 (**permalink**) 12/06/2010, 03:06

¡ups, se me adelantó el amigo Andrés...!

Saludos

bNd170 · #7 (**permalink**) 12/06/2010, 03:22

EDIT: Todo funciona correctamente, mil gracias a ambos.