JavaScript Forum

**Lon** · 10-25-2008, 12:33 AM

I have a "Random Click Image" script that works with regular images but I want to use "Play Once .gif Animations".
What happens is it will play the first animation when the page loads, But when you Click for a random image they show the finished animations only? They do NOT animate they only show the end of the animation.

Can anyone help me get this script to play each animation through?

Here is the script:
-------------------------------
<HEAD>
var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "image1.gif";
images[2] = new Image();
images[2].src = "image2.gif";
images[3] = new Image();
images[3].src = "image3.gif";
images[4] = new Image();
images[4].src = "image4.gif";
images[5] = new Image();
images[5].src = "image5.gif";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}

</script>
</HEAD>
-------------------------------------
<BODY OnLoad="swapPic()">
-------------------------------------
<center>
<a onClick="swapPic();"><img name="randimg" src="image1.gif"></a><br>
<font face="Verdana" size="-2">click image to change</font>
</center>
--------------------------------------

Any help would be appreciated.

Thanks
Lon

**chrishirst** · 10-25-2008, 04:57 AM

That's because they have already played their one animation when they were loaded in to the image array.

recode the list to be a string array of image addresses (URLs) rather than an array of images.

**Lon** · 10-25-2008, 07:05 PM

Thanks for the info, But I'm not shure how to do a "string array of image addresses(URLs)" Will you give me a short example Please.

Lon

**chrishirst** · 10-25-2008, 07:42 PM

images = new Array;
images[0] = "/path/image.ext";
images[1] = "/path/image2.ext";
etc

then document.randimg.src = images[useRand]

then the gifs are not loaded into an image until they are called onto the page.

**Lon** · 10-25-2008, 09:45 PM

I can't get it working? This is what I was trying before your last reply.....But it still don't work at all?
Will you please make the changes for me?

--------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = "/images/image1.gif";
images[2] = "/images/image2.gif";
images[3] = "/images/image3.gif";
images[4] = "/images/image4.gif";
images[5] = "/images/image5.gif";
images[6] = "/images/image6.gif";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
</script>

**chrishirst** · 10-25-2008, 10:24 PM

document.randimg.src = images[useRand].src;

needs to be document.randimg.src = images[useRand];

**Decaf** · 10-25-2008, 10:25 PM

http://www.jslint.com

Quote:

Error:Implied global: document 17, images 3 4 5 6 7 8 9 11

Problem at line 3 character 14: Use the array literal notation [].
images = new Array;

Problem at line 3 character 19: Missing '()' invoking a constructor.
images = new Array;

**chrishirst** · 10-25-2008, 10:47 PM

??
what are you testing with, I've just tested the code, minus images of course and it works with no errors at all.

testing code

Code:

        <div id="main">
            <span id="out" onclick="swapPic()">Click</span>
        </div>
		
    </body>
        <script type="text/javascript" >
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = "/images/image1.gif";
images[2] = "/images/image2.gif";
images[3] = "/images/image3.gif";
images[4] = "/images/image4.gif";
images[5] = "/images/image5.gif";
images[6] = "/images/image6.gif";
function swapPic() {
	var imgnum = images.length - 1;
	do {
	var randnum = Math.random();
	rand1 = Math.round((imgnum - 1) * randnum) + 1;
	} while (rand1 == useRand);
	useRand = rand1;
	document.getElementById("out").innerHTML = images[useRand];
//	document.randimg.src = images[useRand];
}
</script>

BTW there is NO language attribute use <script type="text/javascript">

**Lon** · 10-25-2008, 10:53 PM

When I try

Quote:

needs to be document.randimg.src = images[useRand];

I get Nothing? No image shows on the screen now?

**Lon** · 10-25-2008, 11:39 PM

This is the complete script that I'm using, I'm testing it in Internet Expolrer.

-----------------------------------------------
1. Copied the coding into the HEAD of my HTML document
2. Added the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of my HTML document



<HEAD>
<script type="text/javascript" >
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = "/images/image1.gif";
images[2] = "/images/image2.gif";
images[3] = "/images/image3.gif";
images[4] = "/images/image4.gif";
images[5] = "/images/image5.gif";
images[6] = "/images/image6.gif";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.getElementById("out").innerHTML = images[useRand];
// document.randimg.src = images[useRand];
}
</script>
</HEAD>



<BODY OnLoad="swapPic()">



<center>
<a onClick="swapPic();"><img name="randimg" src="image1.gif"></a><br>
<font face="Verdana" size="-2">click image to change</font>
</center>
----------------------------------------

**chrishirst** · 10-26-2008, 05:52 AM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <title>Random Image Demo Code</title>
    </head>
    <body onload="swapPic()">
        <div id="main">
		<img onclick="swapPic()" id="randimg" name="randimg" src="" />
		<< Click on image to change
        </div>
		
    </body>

	
        <script type="text/javascript" >
var path = "/demo/random-image/images/";
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = "image0.gif";
images[2] = "image1.gif";
images[3] = "image2.gif";
images[4] = "image3.gif";
images[5] = "image4.gif";
images[6] = "image5.gif";
images[7] = "image6.gif";

function swapPic() {
	var imgnum = images.length - 1;
	do {
	var randnum = Math.random();
	rand1 = Math.round((imgnum - 1) * randnum) + 1;
	} while (rand1 == useRand);
	useRand = rand1;
	document.randimg.src = path + images[useRand];
}
		</script>
	
</html>

Working demo at http://www.modtalk.co.uk/demo/random-image/

**Lon** · 10-26-2008, 12:49 PM

Thank You chrishirst I now have it working.

You were a Big help.