Problema con javascript en Firefox

Orpheus_v · #1 (**permalink**) 04/11/2008, 10:54

Buenas tardes,

Utilizo una función javascript para poder rotar 4 imágenes en un mismo espacio. En IE se ejecuta correctamente pero no en Firefox. No reconoce la variable que establece el link de cada imagen.
Aprovecho para lanzar otra pregunta: sería posible crear un script que llamara a la función animateImages() al cargar esta página sin tener que cargarla enla funcion Onload?

Este es el código que utilizo (señalo en rojo la linea que devuelve un error en Firefox.

<html><head><title>Javascript Rotation</title>
<script language="javascript">
var frames;
images=new Array(5);
images[0]=new Image();
images[0].src="images/copy.jpg";
images[1]=new Image();
images[1].src="images/banner-nike.gif";
images[2]=new Image();
images[2].src="images/BPM.gif";
images[3]=new Image();
images[3].src="images/flamingsoccer.jpg";
images[4]=new Image();
images[4].src="images/Header.GIF";
frames=0;
<HTML>
<HEAD>
<title>My Title</title>
<script language="javascript">

function animateImages()
{
document.image_placeholder.src=images[frames].src;
image_link.href=links[frames].value;
frames=(frames+1)%5;
timeout_id=setTimeout("animateImages()",2000);
}
</script>
</head>
<body bgcolor="white" onLoad="animateImages();">
<a href="javascript:0" name="book_link">
<img src="images/copy.jpg" name="image_placeholder" border="0" width="154" height="129"></a>
</body>
</html>

¡Muchas gracias!

Orpheus_v · #2 (**permalink**) 06/11/2008, 09:56

Tomando ejemplo de un usuario que requirió ayuda de los sabios cuando creía que nadie le podía solucionar su asunto y viendo como los sabios acudieron de inmediato, decido seguir su ejemplo.
Imploro la ayuda de Tunait, Karlankas, Caricatos, JavierB o David el Grande por si pudieran ayudar a este pobre errante,

.

Fernand0 · #3 (**permalink**) 06/11/2008, 10:15

image_link no sera document.getElementById('book_link')?

Tampoco veo seteado links... falta codigo...

Código PHP:

  <html><head><title>Javascript Rotation</title>
<script language="javascript">
    var frames;
    images=new Array(5);
    images[0]=new Image(); 
    images[0].src="/Design/Gato.png";
    images[1]=new Image(); 
    images[1].src="/Design/Galaxia.png";
    images[2]=new Image(); 
    images[2].src="/Design/Hoja.png";
    images[3]=new Image(); 
    images[3].src="/Design/Pluma.png";
    frames=0;
    
    function animateImages()
    {
        document.image_placeholder.src=images[frames].src;
        document.getElementById('book_link').href='lala';
        frames=(frames+1)&#37;4;
        timeout_id=setTimeout("animateImages()",2000);
    }
</script>

<HTML>
<HEAD>
<title>My Title</title>
</head>
<body bgcolor="white" onLoad="animateImages();">
<a href="javascript:0" id="book_link">
<img src="http://www.forosdelweb.com/images/copy.jpg" name="image_placeholder" border="0" width="154" height="129"></a>
</body>
</html>

Asi como esta el codigo.. anda..

Orpheus_v · #4 (**permalink**) 06/11/2008, 12:42

Fernando, gracias por tu respuesta!!

Es extraño pq ahora sí que me funciona. El texto html que copié estaba mal. Cogí una de las pruebas que hice olvidándome incluir los links como apuntabas y tb trabajaba con el id del book_link, pq el id da menos problemas. Bueno la cosa es que ahora va... y es que estaba desesperado pq no veía ninguna incoherencia. En fin... Copio el código más abajo con los links por si a alguien le sirve.

Ahora sólo me faltaría saber si es posible crear un script que llamara a la función animateImages() al cargar esta página sin tener que cargarla enla funcion Onload. ¿Alguna idea?

¡Y gracias de nuevo Fernando!

<html><head><title>Javascript Rotation</title>
<script language="javascript1.1">
var frames;
images=new Array(5);
links=new Array(5)
images[0]=new Image();
var frames;
images=new Array(5);
images[0]=new Image();
images[0].src="/Design/Gato.png";
images[1]=new Image();
images[1].src="/Design/Galaxia.png";
images[2]=new Image();
images[2].src="/Design/Hoja.png";
images[3]=new Image();
images[3].src="/Design/Pluma.png";

links[0]=new String();
links[0].value="http://www.sitio1.dominio/";
links[1]=new String();
links[1].value="http://www.sitio2.dominio";
links[2]=new String();
links[2].value="http://www.sitio3.dominio";
links[3]=new String();
links[3].value="http://www.sitio4.dominio";
links[4]=new String();
links[4].value="http://www.sitio5.dominio";
frames=0;
function animateImages()
{
document.image_placeholder.src=images[frames].src;
document.getElementById('book_link').href=links[frames].value;

frames=(frames+1)%5;
timeout_id=setTimeout("animateImages()",2000);
}
</script>
</head>
<body bgcolor="white" onLoad="animateImages();">
<form name=form_home_images method="POST" action="" >
<table border=0><tr><td>
<a href="javascript:0" id="book_link"><img src="http://www.forosdelweb.com/images/copy.jpg" name="image_placeholder" border="0"></a>
</td></tr></table>
</form>
</body>
</html>

David · #5 (**permalink**) 06/11/2008, 12:45

Es que hay que esperar a que se carguen los elementos antes de trabajar con ellos. ¿Por qué no quieres usar el evento onload?.

Fernand0 · #6 (**permalink**) 06/11/2008, 12:50

Cita:

pq el id da menos problemas

No habras hecho document.book_link no? :P
Yo uso para TODO el getElement.. no siempre se puede hacer de esa manera

Cita:

Ahora sólo me faltaría saber si es posible crear un script que llamara a la función animateImages() al cargar esta página sin tener que cargarla enla funcion Onload. ¿Alguna idea?

Podes poner en el codigo JS... window.onload=animateImages;... de otra manera no se puede

Orpheus_v · #7 (**permalink**) 07/11/2008, 02:59

¡Buenos días!

Respondo a los dos:

Para David el Grande-> Los elementos estaban cargados pero las imágenes no rotaban en Firefox, pero sí en IE, pq de una variable me decía que no tenía properties. Imagino que todo sería problema de caché pq después de probar lo que me envió Fernando y ver que funcionaba y al comprobar que yo tenía lo mismo, no puedo imaginar otra cosa.

Quería prescindir del evento onload porque trabajo con un editor de contenidos, donde las páginas que forman la web tienen una plantilla general donde ya está definida una función onload para cargar partes fijas. Pero el problema surge cuando al cargar una página específica quiero ejecutar algo concreto sólo para esta página. Si creo de nuevo una función onload, al haber 2, se pierde la referencia de la segunda.

Para Fernando-> Je! primero había hecho un document.book_link. Pero enseguida lo cambié por la función getElementById pq de lo contrario podría tener problemas con el resto de navegadores.

Para los dos-> ¡Muchas gracias por vuestro tiempo!

David · #8 (**permalink**) 07/11/2008, 05:44

En ese caso puedes usar la función addLoadEvent() (Por Simon Willison), o también addEventListener().

Saludos

.

Orpheus_v · #9 (**permalink**) 07/11/2008, 07:11

Gracias David por tu respuesta!

Tengo una duda, ¿desde donde se invoca a esta función?

David · #10 (**permalink**) 07/11/2008, 07:16

En el comienzo de tu código

, que es donde normalmente se asignan los eventos (hasta el mismo window.onload).

Orpheus_v · #11 (**permalink**) 07/11/2008, 08:33

Genial, solucionado!

Muchas gracias Fernando y buen fin de semana!!