View Full Version : random rollovers

02-12-2007, 12:11 PM
My javascript is rustier than I thought :o I've got 6 static GIFs on a page. I want to randonly swap one of them for its animated counterpart every now and again. I have the following, but I'm getting an error that document.images[newImg] has no properties (Firefox 2) or that document.images[...].src is null (IE6).

Clearly the second parameter isn't getting passed through, but I dunno why? Where am I going wrong?

<script type="text/javascript">
var imgFire = new Image(99,95)
imgFire.src = "images/fire_protest.gif"
var imgExplosion = new Image(104,105)
imgExplosion.src = "images/explosion_protest.gif"
var imgDrowning = new Image(122,98)
imgDrowning.src = "images/drowning_protest.gif"
var imgThrowing = new Image(115,91)
imgThrowing.src = "images/throwing_protest.gif"
var imgBaseball = new Image(119,106)
imgBaseball.src = "images/baseball_protest.gif"
var imgHammer = new Image(114,94)
imgHammer.src = "images/hammer_protest.gif"

var imgFire_s = new Image(99,95)
imgFire_s.src = "images/fire_protest.gif"
var imgExplosion_s = new Image(104,105)
imgExplosion_s.src = "images/explosion_protest.gif"
var imgDrowning_s = new Image(122,98)
imgDrowning_s.src = "images/drowning_protest.gif"
var imgThrowing_s = new Image(115,91)
imgThrowing_s.src = "images/throwing_protest.gif"
var imgBaseball_s = new Image(119,106)
imgBaseball_s.src = "images/baseball_protest.gif"
var imgHammer_s = new Image(114,94)
imgHammer_s.src = "images/hammer_protest.gif"

var imgFire_a = new Image(99,95)
imgFire_a.src = "images/fire_protest_a.gif"
var imgExplosion_a = new Image(104,105)
imgExplosion_a.src = "images/explosion_protest_a.gif"
var imgDrowning_a = new Image(122,98)
imgDrowning_a.src = "images/drowning_protest_a.gif"
var imgThrowing_a = new Image(115,91)
imgThrowing_a.src = "images/throwing_protest_a.gif"
var imgBaseball_a = new Image(119,106)
imgBaseball_a.src = "images/baseball_protest_a.gif"
var imgHammer_a = new Image(114,94)
imgHammer_a.src = "images/hammer_protest_a.gif"

var aImages = new Array("imgFire", "imgExplosion", "imgDrowning", "imgThrowing", "imgBaseball", "imgHammer");
var aImages_s = new Array("imgFire_s", "imgExplosion_s", "imgDrowning_s", "imgThrowing_s", "imgBaseball_s", "imgHammer_s");
var aImages_a = new Array("imgFire_a", "imgExplosion_a", "imgDrowning_a", "imgThrowing_a", "imgBaseball_a", "imgHammer_a");

function roll(img, newImg){;
document.getElementById(img).src = document.images[newImg].src;

function randimate(){
var ran_number = Math.floor(Math.random()*aImages.length-1);
roll(aImages[ran_number], aImages_a[ran_number]);
var t1 = setTimeout("roll(aImages[" + ran_number + "], aImages_s[" + ran_number + "])",3000);
var t2 = setTimeout("randimate()",5000);


(function randimate() is initially called via body onload)

Arty Effem
02-12-2007, 01:05 PM
var ran_number = Math.floor(Math.random()*aImages.length-1);
That line can return -1.

Mr J
02-12-2007, 02:17 PM
As pointed out by arty effem

Change this line

var ran_number = Math.floor(Math.random()*aImages.length-1);


var ran_number = Math.floor(Math.random()*aImages.length);

But also change this line

document.getElementById(img).src = document.images[newImg].src;


document.getElementById(img).src = window[newImg].src

see if that helps

02-12-2007, 03:20 PM
That did the trick, many thanks.