I am using a basic image rotator script found online. It works fine. But what I need is to show 4 images on the page, and have all 4 of those rotate the images I have defined in the script.
My script in between the HEAD:
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Robert Bui (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->) -->
<!-- Web Site: <!-- m --><a class="postlink" href="http://astrogate.virtualave.net">http://astrogate.virtualave.net</a><!-- m --> -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! <!-- m --><a class="postlink" href="http://javascript.internet.com">http://javascript.internet.com</a><!-- m --> -->
<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->
</script>
BODY statement:
<BODY bgColor=navy leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" OnLoad="rotateImage('rImage')">
AND TO SHOW THE IMAGES:
<img name="rImage" src=http://www.webdeveloper.com/forum/archive/index.php/"http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
Now, how would I show 4 images and have them all rotate the images I defined above?
My script in between the HEAD:
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Robert Bui (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->) -->
<!-- Web Site: <!-- m --><a class="postlink" href="http://astrogate.virtualave.net">http://astrogate.virtualave.net</a><!-- m --> -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! <!-- m --><a class="postlink" href="http://javascript.internet.com">http://javascript.internet.com</a><!-- m --> -->
<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->
</script>
BODY statement:
<BODY bgColor=navy leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" OnLoad="rotateImage('rImage')">
AND TO SHOW THE IMAGES:
<img name="rImage" src=http://www.webdeveloper.com/forum/archive/index.php/"http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
Now, how would I show 4 images and have them all rotate the images I defined above?