Arcade Games - Wordpress Themes - Debt Consolidation - Wordpress Themes - Expekt bonuses
PDA

View Full Version : Please help with image rotating script

JasMate
Aug 18th 2007, 9:12 pm
Currently the script rotates images every page refresh, however I want it to only rotate the images every 60 seconds.

Here is the script, thanks for the help:



var images = new Array();

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
images[3] = "images/4.jpg";

function ShowImg() {
var number = images.length;
var increment = Math.floor(Math.random() * number);
var strTemp ='<img src="' + images[increment] + '">';
document.write(strTemp);
}

var rotate = 5000;
var count = 0;

function RotateImg(myImage){
myImage.src=images[count];
count++;
if(count==images.length){count = 0;}
setTimeout("RotateImg(myImage)",rotate);
}



I put this between the head tags:
<script type="text/javascript" src="rotate.js"></script>

And this where I want the image/s to go:

<script language="javascript">ShowImg();</script>
nhl4000
Aug 18th 2007, 10:17 pm
document.write(strTemp);
That's your problem. I think you should have an image tag with a name like
<form name="Form1">
<img name="Picture" src="">
</form>
And then use this to change the src
document.Form1.Picture.src = images[increment]
JasMate
Aug 18th 2007, 10:19 pm
That's your problem. I think you should have an image tag with a name like

And then use this to change the src

Thanks for your help but I don't have a clue what your talking about :p
I don't know much about code lol, but i am trying to learn!
mjamesb
Aug 20th 2007, 6:07 pm
What they mean is you should have an element already on the page. In this example I have an <img> tag with and id="RotateImg". So rather than doing a document.write just reference the image and change its source.

<head>
<title>Untitled</title>

<script language="javascript">
var images = new Array();

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
images[3] = "images/4.jpg";

function ShowImg() {
var number = images.length;
var increment = Math.floor(Math.random() * number);
document.getElementById("RotateImg").src = images[increment];
}

var rotate = 5000;
var count = 0;

function RotateImg(myImage){
myImage.src=images[count];
count++;
if(count==images.length){count = 0;}
setTimeout("RotateImg(myImage)",rotate);
}
</script>

</head>
<body>
<img src="1.jpg" id="RotateImg">
</body>
</html>
JasMate
Aug 20th 2007, 6:09 pm
Thanks for helping, does that make it so the image will only rotate at the time I set, even if the page is refreshed?
mjamesb
Aug 20th 2007, 8:22 pm
once the page is refreshed the script would reinitialize. Javascript doesn't maintain state when the page is refreshed.
JasMate
Aug 22nd 2007, 4:19 am
once the page is refreshed the script would reinitialize. Javascript doesn't maintain state when the page is refreshed.

Oh, ok. Thanks anyway. I guess it wasn't meant to be.