Help with multiple rotating images?

@08hirobinjFeb 10.2009

This code pasted below is used for one set of four images rotating randomly.What part of the code do I change to have three sets of four images rotating at random next to each other?

code:

<!– THREE STEPS TO INSTALL RANDOM IMAGE ROTATOR:

1. Copy the coding into the HEAD of your HTML document

2. Add the onLoad event handler into the BODY tag

3. Put the last coding into the BODY of your HTML document –>

<!– STEP ONE: Paste this code into the HEAD of your HTML document –>

[code] <HEAD>

<SCRIPT LANGUAGE=”JavaScript”> <!– Original: Robert Bui ([email protected]) –> <!– Web Site: [url]http://astrogate.virtualave.net[/url] –>

<!– This script and many more are available free online at –> <!– The JavaScript Source!! [url]http://javascript.internet.com[/url] –>

<!– Begin var interval = 2.5; // delay between rotating images (in seconds) var random_display = 1; // 0 = no, 1 = yes interval *= 1000;

<!– STEP TWO: Insert the onLoad event handler into your BODY tag –>

<BODY OnLoad=”rotateImage(‘rImage’)”>

<!– STEP THREE: Copy this code into the BODY of your HTML document –>

<center> <img name=”rImage” src=”http://javascript.internet.com/img/image-cycler/01.jpg” width=120 height=90> </center>

<p><center> <font face=”arial, helvetica” size=”-2″>Free JavaScripts provided<br> by <a href=”http://javascriptsource.com”>The JavaScript Source</a></font> </center><p>[/code]

<!– Script Size: 2.29 KB –>

to post a comment

JavaScript

54 Comments(s) _↴

@JMRKERFeb 10.2009 — #Here's a version that has been extensivelly modified from your original

<i>
 </i>&lt;html&gt;
 &lt;HEAD&gt;
 &lt;title&gt;Rotating Banners&lt;/title&gt;
 &lt;!--
 Original:  Robert Bui ([email protected]) 
 Web Site:  http://astrogate.virtualave.net 
 
 Extensively modified by Jay Rumsey
 From: http://www.webdeveloper.com/forum/showthread.php?t=201788
 
 This script and many more are available free online at 
 The JavaScript Source!! http://javascript.internet.com
 --&gt;
 &lt;SCRIPT type="text/javascript" LANGUAGE="JavaScript"&gt;
 var interval = 2.5; // delay between rotating images (in seconds)
 interval *= 1000;
 var random_display = 1; // 0 = no, 1 = yes
 
 var image_index = 0;
 image_list = [  // 3 groups of 4 images --- Keep symetrical
 
 ["http://javascript.internet.com/img/image-cycler/01.jpg"],
 ["http://javascript.internet.com/img/image-cycler/02.jpg"],
 ["http://javascript.internet.com/img/image-cycler/03.jpg"],
 ["http://javascript.internet.com/img/image-cycler/04.jpg"],
 
 ["http://javascript.internet.com/img/image-cycler/02.jpg"],
 ["http://javascript.internet.com/img/image-cycler/03.jpg"],
 ["http://javascript.internet.com/img/image-cycler/04.jpg"],
 ["http://javascript.internet.com/img/image-cycler/01.jpg"],
 
 ["http://javascript.internet.com/img/image-cycler/03.jpg"],
 ["http://javascript.internet.com/img/image-cycler/04.jpg"],
 ["http://javascript.internet.com/img/image-cycler/01.jpg"],
 ["http://javascript.internet.com/img/image-cycler/02.jpg"]  // Note: no comma after last entry
 ];
 
 var number_of_image = image_list.length / 3;  // array size / number of groups (3 for this example)
 
 function generate(range) {
 return Math.floor(Math.random() * range);
 }
 function getNextImage() {
 if (random_display) {
 image_index = generate(number_of_image);  // 0..number of images in group
 } else {
 image_index = (image_index+1) % number_of_image;
 }
 return image_index;
 }
 function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Limage').src = image_list[place];
 document.getElementById('Mimage').src = image_list[place+4];  // number of items in group (4 for this)
 document.getElementById('Rimage').src = image_list[place+8];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }
 &lt;/script&gt;
 &lt;/HEAD&gt;
 
 &lt;!-- STEP TWO: Insert the onLoad event handler into your BODY tag  --&gt;
 
 &lt;BODY OnLoad="rotateImage(0)"&gt;
 
 &lt;!-- STEP THREE: Copy this code into the BODY of your HTML document  --&gt;
 
 &lt;center&gt;
 &lt;img name="lImage" id='Limage' 
 src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90&gt;
 &lt;img name="mImage" id='Mimage'
 src="http://javascript.internet.com/img/image-cycler/02.jpg" width=120 height=90&gt;
 &lt;img name="rImage" id='Rimage' 
 src="http://javascript.internet.com/img/image-cycler/03.jpg" width=120 height=90&gt;
 &lt;/center&gt;
 
 &lt;p&gt;&lt;center&gt;
 &lt;font face="arial, helvetica" size="-2"&gt;Free JavaScripts provided&lt;br&gt;
 by &lt;a href="http://javascriptsource.com"&gt;The JavaScript Source&lt;/a&gt;&lt;/font&gt;
 &lt;/center&gt;&lt;p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Let me know if you have any questions about any changes.

@MaydayFeb 10.2009 — #JMRKER, with your modified code, will there always be 3 different images at once, or could you still get 2 or 3 of the same one showing up at the same time?

@JMRKERFeb 10.2009 — #I'm not sure what you are trying to accomplish.

You only provided 4 pictures. I just copied the same group of 4, but it should be fairly easy to change or add to the image list.

Your original requestWhat part of the code do I change to have three sets of four images rotating at random next to each other?
[/QUOTE] I thought I fulfilled.

What is it that you want to do differently. ?

@MaydayFeb 11.2009 — #I'm not sure what you are trying to accomplish.

You only provided 4 pictures. I just copied the same group of 4, but it should be fairly easy to change or add to the image list.

Your original request I thought I fulfilled.

What is it that you want to do differently. ?[/QUOTE]

Ummm if that was directed at my response directly above yours, I was not the OP, I was just asking a general question about your solution.

To clarify my question, if you have 4 pictures (as in the OP's code), and you want to display 3 at once randomly, using your code suggestion, will it:

A. always produce 3 different pictures at once (i.e. #4,#1,#3 or #3,#2,#1)

or

B. will it be completely random so you may get repeats of the same pic at the same time (i.e. #4,#2,#4 or #2,#2,#1 or even #3,#3,#3)

Just wondering because recently I had a similar project and used a different solution.

@JMRKERFeb 11.2009 — #Ummm if that was directed at my response directly above yours, I was not the OP, I was just asking a general question about your solution.

To clarify my question, if you have 4 pictures (as in the OP's code), and you want to display 3 at once randomly, using your code suggestion, will it:

A. always produce 3 different pictures at once (i.e. #4,#1,#3 or #3,#2,#1)

or

B. will it be completely random so you may get repeats of the same pic at the same time (i.e. #4,#2,#4 or #2,#2,#1 or even #3,#3,#3)

Just wondering because recently I had a similar project and used a different solution.[/QUOTE]

Sorry, I didn't look at the post close enough to determine a different user was posing the question. :o

To answer your question, both are possible:

A. Remove the images 1..4 in the second and third groups. Reduce the number of groups to display

<i>
 </i>image_list = [  // 1 group of 4 images
 ["http://javascript.internet.com/img/image-cycler/01.jpg"],
 ["http://javascript.internet.com/img/image-cycler/02.jpg"],
 ["http://javascript.internet.com/img/image-cycler/03.jpg"],
 ["http://javascript.internet.com/img/image-cycler/04.jpg"]
 ];
 ...
 var number_of_image = image_list.length; // 1;  // array size/number of groups
 ...
 function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Limage').src = image_list[place];
 document.getElementById('Mimage').src = image_list[place+1];  // number of items in group (4 for this)
 document.getElementById('Rimage').src = image_list[place+2];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }

B. is also possible with a similar change

<i>
 </i>function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Limage').src = image_list[place];
 place = getNextImage();
 document.getElementById('Mimage').src = image_list[place];  // number of items in group (4 for this)
 place = getNextImage();
 document.getElementById('Rimage').src = image_list[place];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }

Not fully tested, but should work. Let me know if you have problems.

In use, I would not put the same images in each of the groups (3 in this case), but I did not have any others than those supplied by the original OP.

@08hirobinjauthorFeb 12.2009 — #Hi, I am the original OP. Thank you for your response - it's exactly what I needed. Again, thank you. Regards. 08hirobinj

@JMRKERFeb 12.2009 — #O8hirobinj: You're most welcome.

Glad I was able to help.

Now just waiting to see if "Mayday" still has a problem.

Good Luck to both of you! ?

@MaydayFeb 12.2009 — #I haven't tried your solution, but looking at the code, I see what you're getting at. Thanks for clarifying. ?

@JMRKERFeb 12.2009 — #... a two-fer of happiness. Makes my day!

?

@vwphillipsFeb 12.2009 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script type="text/javascript">
 /*<![CDATA[*/
 imagelist = [];
 imagelist[0] ="http://javascript.internet.com/img/image-cycler/02.jpg";
 imagelist[1] ="http://javascript.internet.com/img/image-cycler/03.jpg";
 imagelist[2] ="http://javascript.internet.com/img/image-cycler/04.jpg";
 
 
 function Rotate(id,ary,spd,srt){
 var obj=document.getElementById(id);
 var roop=new RotateOOP(obj,ary,spd,srt);
 }
 
 function RotateOOP(obj,ary,spd,srt){
 this.obj=obj;
 this.ary=ary;
 this.ary=ary.concat(obj.src);
 this.spd=spd||2000;
 this.cnt=srt||0;
 this.to=null;
 this.srcary=[];
 this.to=setTimeout(function(oop){return function(){oop.rotate();}}(this),this.spd);
 }
 
 RotateOOP.prototype.rotate=function(){
 if (!this.srcary[this.cnt]){
 this.srcary[this.cnt]=new Image();
 this.srcary[this.cnt].src=this.ary[this.cnt];
 }
 if (!this.srcary[this.cnt].complete){
 return this.to=setTimeout(function(){ this.rotate(); },500);
 }
 this.obj.src=this.srcary[this.cnt].src;
 this.cnt=++this.cnt%this.ary.length;
 this.to=setTimeout(function(oop){return function(){oop.rotate();}}(this),this.spd);
 }
 
 /*]]>*/
 </script>
 
 </head>
 
 <body onload="Rotate('tst1',imagelist,2000,0);Rotate('tst2',imagelist,3000,0);Rotate('tst3',imagelist,1000,0);">
 <img id="tst1" src="http://javascript.internet.com/img/image-cycler/01.jpg" />
 <img id="tst2" src="http://javascript.internet.com/img/image-cycler/01.jpg" />
 <img id="tst3" src="http://javascript.internet.com/img/image-cycler/01.jpg" />
 </form>
 </body>
 
 </html>[/CODE]

@JMRKERFeb 12.2009 — #"vwphillips":

Your modification is interesting, but I'm getting an error on line #38: this.rotate is not a function

I'm having trouble fixing the problem with this.Rotate as it causes additional problems,

and while it may be a good OO example, there are too many this. labels for me to comprehend.

Could you take a look and see what the problem is and add some more comments if possible? ?

I would like to see what you are trying to accomplish and why/where it might be a better example than the script I provided. ?

@vwphillipsFeb 12.2009 — #oops

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script type="text/javascript">
 /*<![CDATA[*/
 imagelist = [];
 imagelist[0] ="http://javascript.internet.com/img/image-cycler/02.jpg";
 imagelist[1] ="http://javascript.internet.com/img/image-cycler/03.jpg";
 imagelist[2] ="http://javascript.internet.com/img/image-cycler/04.jpg";
 
 
 function Rotate(id,ary,spd,srt){
 var obj=document.getElementById(id);
 var roop=new RotateOOP(obj,ary,spd,srt);
 }
 
 function RotateOOP(obj,ary,spd,srt){
 this.obj=obj;
 this.ary=ary;
 this.ary=ary.concat(obj.src);
 this.spd=spd||2000;
 this.cnt=srt||0;
 this.to=null;
 this.srcary=[];
 this.to=setTimeout(function(oop){return function(){oop.rotate();}}(this),this.spd);
 }
 
 RotateOOP.prototype.rotate=function(){
 clearTimeout(this.to);
 if (!this.srcary[this.cnt]){
 this.srcary[this.cnt]=new Image();
 this.srcary[this.cnt].src=this.ary[this.cnt];
 }
 if (!this.srcary[this.cnt].complete){
 return this.to=setTimeout(function(oop){return function(){oop.rotate();}}(this),500);
 }
 this.obj.src=this.srcary[this.cnt].src;
 this.cnt=++this.cnt&#37;this.ary.length;
 this.to=setTimeout(function(oop){return function(){oop.rotate();}}(this),this.spd);
 }
 
 /*]]>*/
 </script>
 
 </head>
 
 <body onload="Rotate('tst1',imagelist,2000,0);Rotate('tst2',imagelist,3000,0);Rotate('tst3',imagelist,1000,0);">
 <img id="tst1" src="http://javascript.internet.com/img/image-cycler/01.jpg" />
 <img id="tst2" src="http://javascript.internet.com/img/image-cycler/01.jpg" />
 <img id="tst3" src="http://javascript.internet.com/img/image-cycler/01.jpg" />
 </form>
 </body>
 
 </html>[/CODE]

@08hirobinjauthorFeb 13.2009 — #You people are going into stuff I do not know anything about (and thanks again for the help) however I'll stick with the original solution you wrote - the problem is that in google chrome the images does rotate, but in internet explore it stay's static??

@JMRKERFeb 13.2009 — #What kind of problems are you having? It appears to work fine in IE-8 and FF for me.

Post what you are using as you must have changed something for the worst ?

@08hirobinjauthorFeb 13.2009 — #Hi, this is the page I'm working on:

http://www.montanagp.co.za/index_old5.htm

@JMRKERFeb 13.2009 — #Haven't looked at the entire site yet, but I see at least one area to investigate.

You have at least two <body> tags:

<i>
 </i>&lt;body onload="FP_preloadImgs(/*url*/'button7B.gif', /*url*/'button7C.gif', /*url*/'button84.gif', /*url*/'button85.gif', /*url*/'button8D.gif', /*url*/'button8E.gif', /*url*/'button90.gif', /*url*/'button91.gif', /*url*/'button93.gif', /*url*/'button94.gif', /*url*/'button96.gif', /*url*/'button97.gif', /*url*/'button33.gif', /*url*/'button32.gif', /*url*/'button2A1.gif', /*url*/'button30.gif', /*url*/'button42.gif', /*url*/'button35.gif', /*url*/'button3F1.gif', /*url*/'button3E1.gif', /*url*/'button43.gif', /*url*/'button44.gif', /*url*/'button45.gif', /*url*/'button46.gif')" style="background-color: #00FF00; background-image: url('')"&gt;
 .....
 .....
 .....
 &lt;/body&gt;
 &lt;BODY OnLoad="rotateImage(0)"&gt;

I believe you can have only one BODY in a document and probably only one onLoad assignment.

You might try to combine these somehow to see it that corrects the problem.

I don't believe it is in the script I provided, but in the script that you have created.

Also, I have never seen the /*url*/ in the first statement either.

I'm not sure what they do nor if they are even required.

Look like JS comments, but are showing in the <BODY> tag. ?

Finally, I'm not sure why you needed 3 groups of 4 images as the last group is all the same!

Why not just have 2 groups with one static image?

May not solve the problem but at least something to investigate.

@08hirobinjauthorFeb 14.2009 — #Yeah thanks: I removed the body "onload" and "url" code

...and it seems to work fine in IE-8 and FF. Your a genius! (or rather I'm new at this!).

Regarding your: "Finally, I'm not sure why you needed 3 groups of 4 images as the last group is all the same! Why not just have 2 groups with one static image?"

I'm to scared to remove anything from the third set of images (hence they're all the same) thinking that the other images will go haywire again! What parts do I change to have only two rotating images and the third just static?

@JMRKERFeb 14.2009 — #If you feel adventurous, try changing these statements:

<i>
 </i>image_list = [  // 2 groups of 4 images --- Keep symetrical
 
 ["flower1left.jpg"],
 ["flower2left.jpg"],
 ["flower3left.jpg"],
 ["flower4left.jpg"],
 
 ["flower2left.jpg"],
 ["flower3left.jpg"],
 ["flower4left.jpg"],
 ["flower1left.jpg"]  // Note: no comma after last entry
 ];
 
 var number_of_image = image_list.length / 2;  // array size / number of groups (3 for this example)
 .....
 function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Limage').src = image_list[place];
 document.getElementById('Mimage').src = image_list[place+4];  // number of items in group (4 for this)
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }
 .....
 &lt;tr&gt;
 &lt;td align="left" id="toptd" style="background-color: #008000; background-image:url('top-bg2.jpg')"&gt;
 &lt;img border="0" src="barleft.jpg" width="34" height="180"&gt;
 &lt;img name="lImage" id='Limage'  src="flower1left.jpg" width="160" height="179"&gt;
 &lt;img border="0" src="barmiddle.jpg" width="30" height="180"&gt;
 &lt;img name="mImage" id='Mimage'
 src="flower2left.jpg" width="160" height="179"&gt;
 &lt;img border="0" src="barmiddle.jpg" width="12" height="180"&gt;
 &lt;img name="rImage" id='Rimage'  src="barright.jpg" width="341" height="180"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;

Note, you could also expand the rotating banners (instead of contracting them)

if you have additional pictures of Vietnam pots and other flowered entrances (lower on the site)

as most of the logic is in place. You would just need to add the placeholders.

?

@08hirobinjauthorFeb 15.2009 — #The rotating has stopped?

<tr>

<td align="left" id="toptd" style="background-color: #008000; background-image:url('top-bg2.jpg')">

<img border="0" src="barleft.jpg" width="34" height="180">

<img name="lImage" id='Limage' src="flower1left.jpg" width="160" height="179">

<img border="0" src="barmiddle.jpg" width="30" height="180">

<img name="mImage" id='Mimage'

src="flower2left.jpg" width="160" height="179">

<img border="0" src="barmiddle.jpg" width="12" height="180">

<img name="rImage" id='Rimage' src="barright.jpg" width="341" height="180">

</td>

</tr>

Shouldn't this statement ("rImage" id='Rimage') change or be removed as well, because I'm not using the 3rd set of images (as part of the rotating images) anymore (it should be static)?

<img name="rImage" id='Rimage' src="barright.jpg" width="341" height="180">

and 2nd: I'm interested ("be adventurous"!) in rotating the bottom set of images too! Is this the correct statement to use?

-->

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

var interval = 1.5; // delay between rotating images (in seconds)

interval *= 1000;

var random_display = 1; // 0 = no, 1 = yes

var image_index = 0;

image_list = [ // 6 groups of 4 images --- Keep symetrical

["flower1left.jpg"],

["flower2left.jpg"],

["flower3left.jpg"],

["flower4left.jpg"],

["flower2left.jpg"],

["flower3left.jpg"],

["flower4left.jpg"],

["flower1left.jpg"],

["Images/SMALL01.jpg"],

["Images/SMALL02.jpg"],

["Images/SMALL03.jpg"],

["Images/SMALL04.jpg"],

["Images/SMALL02.jpg"],

["Images/SMALL03.jpg"],

["Images/SMALL04.jpg"],

["Images/SMALL01.jpg"],

["Images/SMALL03.jpg"],

["Images/SMALL04.jpg"],

["Images/SMALL01.jpg"],

["Images/SMALL02.jpg"],

["Images/SMALL04.jpg"],

["Images/SMALL01.jpg"],

["Images/SMALL02.jpg"],

["Images/SMALL03.jpg"] // Note: no comma after last entry

];

var number_of_image = image_list.length / 6; // array size / number of groups (6 for this example)

function rotateImage(place) {

place = getNextImage();

document.getElementById('Limage').src = image_list[place];

document.getElementById('Mimage').src = image_list[place+4]; // number of items in group (4 for this)

document.getElementById('Aimage').src = image_list[place+4];

document.getElementById('Bimage').src = image_list[place+4];

document.getElementById('Cimage').src = image_list[place+4];

document.getElementById('Dimage').src = image_list[place+4];

place++;

var recur_call = "rotateImage("+place+")";

setTimeout(recur_call, interval);

}

</script>

</HEAD>

........

<td align="left" valign="top" width="601">

 <p align="center">

<img name="aImage" id='Aimage' src="Images/SMALL01.jpg" alt="" width="112" height="149" border="1" />

<img name="bImage" id='Bimage' src="Images/SMALL03.jpg" alt="" width="112" height="149" border="1" />

<img name="cImage" id='Cimage' src="Images/SMALL02.jpg" alt="" width="112" height="149" border="1" />

<img name="dImage" id='Dimage' src="Images/SMALL04.jpg" alt="" width="112" height="149" border="1" />

</p>

<p> </td>

...............

however I think my problem lies here? Have I placed this in the correct place?:

</body>

<BODY OnLoad="rotateImage(0)" style="background-color: #84E15F; background-image: url('')">

</html>

Anyway, thanks for your insight - I'm starting to learn more and more!

Regards.

@JMRKERFeb 15.2009 — #I have not yet looked at your problem, but as I said in post #17, I don't think you can have two <BODY> tags in the same program. Try combinine them into one tag only.

The 'Rimage' question is not the problem. You need to have it to put in your static image.

The rotating function does not try to change that image when I removed the 3rd of the original groups and removed the setup with the "+8" statement inside the function.

Fix thoses problems and if still no rotate, then post back with link giving you problems.

@08hirobinjauthorFeb 16.2009 — #Please scan through this to see if I've done something wrong?

<HEAD>

-->

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

var interval = 1.5; // delay between rotating images (in seconds)

interval *= 1000;

var random_display = 1; // 0 = no, 1 = yes

var image_index = 0;

image_list = [ // 2 groups of 4 images --- Keep symetrical

["flower1left.jpg"],

["flower2left.jpg"],

["flower3left.jpg"],

["flower4left.jpg"],

["flower2left.jpg"],

["flower3left.jpg"],

["flower4left.jpg"],

["flower1left.jpg"] // Note: no comma after last entry

];

var number_of_image = image_list.length / 2; // array size / number of groups (2 for this example

function rotateImage(place) {

place = getNextImage();

document.getElementById('Limage').src = image_list[place];

document.getElementById('Mimage').src = image_list[place+4]; // number of items in group (4 for this)

place++;

var recur_call = "rotateImage("+place+")";

setTimeout(recur_call, interval)

}

</script>

</HEAD>

...........

............

.............

<tr>

<td align="center" valign="top" width="781" colspan="5" bgcolor="#008000">

<p align="left"><img border="0" src="barleft.jpg" width="34" height="180"><img name="lImage" id='Limage' src="flower1left.jpg" width="165" height="180"><img border="0" src="barmiddle.jpg" width="21" height="180"><img name="mImage" id='Mimage'

src="flower2left.jpg" width="160" height="181"><img border="0" src="barmiddle.jpg" width="22" height="180"><img name="rImage" id='Rimage' src="barright.jpg" width="335" height="180"></td>

</tr>

......................

....................

</body>

<BODY OnLoad="rotateImage(0)">

</html>

I'm not sure if I have placed the "OnLoad" statement in the correct place? Is this correct at the end of the list between "</body>" & "</html>"?

Regards.

@JMRKERFeb 16.2009 — #An outline of the HTML should follow this:

<i>
 </i>&lt;!-- DOC statement of your choice --&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Title of Program&lt;/title&gt;
 
 &lt;!-- two methods follow to add scripts to HTML document --&gt;
 &lt;script type="text/javascript" src="external.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 // internal script contents
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt; &lt;!-- include onload="function()" if appropriate here --&gt;
 &lt;!-- Program with JS calls or additional &lt;script&gt; tag contents --&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

Note: Only one pair of <HTML>, <HEAD> and <BODY> tags in program

which are inclusive (html) and separate (head, body).

The <body> tags in your last post are:

a) Non-existent after </head> tag

b) Out of order a end </body><BODY ...>

c) Do not close after last <BODY> tag

Most tags are always in pairs with one doing the opening and the other closing.

Take a look at my earlier posts to see tag sequence or use a HTML tutorial

to help you set-up the correct sequence.

@08hirobinjauthorApr 01.2009 — #Hi, could you please remove the url I mistakingly entered in this thread? Regards

@08hirobinjauthorApr 10.2009 — #Is it possible for the administrator or person with the authority - to remove this thread? Regards, 08hirobinj.

@JMRKERApr 10.2009 — #Is it possible for the administrator or person with the authority - to remove this thread? Regards, 08hirobinj.[/QUOTE]

I don't see a URL to worry about.

Don't worry about it!

?

@urbancityrobMay 14.2009 — #[B]JMRKER[/B],

I see what you have done and was wondering (I'm also new to js) how I would go about making the images rotate at different speeds? Is there a way to assign them all different speeds.

For example:

"lImage" id='Limage' = 1.5 sec

"mImage" id='Mimage' = 2 sec

"rImage" id='Rimage' = 3.5 sec

That way they are all not changing at the same time. Thanks in advance.

@JMRKERMay 14.2009 — #Post what code you are currently using

or better yet a link to where you want the change to occur

or better still, both!

@urbancityrobMay 15.2009 — #Wasn't expecting a response so quickly, so thanks! So here are both. Ultimately what I would like this to do is...

1. left side has 5 rotating images, I would like them to be chosen at random and at one sped say 3 sec.

2. Right side also has 5 rotating images that I would like to have them be displayed in not specific order and at a different speed say 4 sec.

Here is what I used:
<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

var interval = 2.5; // delay between rotating images (in seconds)

interval *= 1000;

var random_display = 1; // 0 = no, 1 = yes

var image_index = 0;

image_list = [ // 2 groups of 5 images --- Keep symetrical

["images/splash-left-01.jpg"],

["images/splash-left-02.jpg"],

["images/splash-left-03.jpg"],

["images/splash-left-04.jpg"],

["images/splash-left-05.jpg"],

["images/splash-right-05.jpg"],

["images/splash-right-02.jpg"],

["images/splash-right-03.jpg"],

["images/splash-right-04.jpg"],

["images/splash-right-01.jpg"] // Note: no comma after last entry

];

var number_of_image = image_list.length / 2; // array size / number of groups (3 for this example)

function generate(range) {

return Math.floor(Math.random() * range);

}

function getNextImage() {

if (random_display) {

image_index = generate(number_of_image); // 0..number of images in group

} else {

image_index = (image_index+1) % number_of_image;

}

return image_index;

}

function rotateImage(place) {

place = getNextImage();

document.getElementById('Limage').src = image_list[place];

document.getElementById('Rimage').src = image_list[place+5]; // number of items in group (4 for this)

place++;

var recur_call = "rotateImage("+place+")";

setTimeout(recur_call, interval);

}

</script>

[/QUOTE]

You can also see it working here. http://www.coupedup.com/index.html

Its looks fine, what I was looking for just want to add a few tweeks, Thanks.

@JMRKERMay 15.2009 — #?

Try this modification. Alter your image URLs.

Remove <table> if you setup differently on your site.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Multiple Timed Galleries&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 //  For: http://www.webdeveloper.com/forum/showthread.php?t=201788&amp;page=2
 
 var Fortunato = [
 ['http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg','3 days old'],
 ['http://www.westsierrahanoverians.com/images/fortunato_foal.jpg','3 monhs old'],
 ['http://www.westsierrahanoverians.com/images/fortunato_canter.jpg','Canter'],
 ['http://www.westsierrahanoverians.com/images/forunato_trot.jpg','Trot']  // Note: NO comma after last entry
 ];
 var Mares = [
 ['http://www.westsierrahanoverians.com/images/wakanova_conf.jpg','Wakanova'],
 ['http://www.westsierrahanoverians.com/images/princess_canter.jpg','Princess'],
 ['http://www.westsierrahanoverians.com/images/dona_fran_trot.jpg','Dona Fran trot'],
 ['http://www.westsierrahanoverians.com/images/wakanova_trot2.jpg','Wakanova trot']
 ];
 
 function SetImage(IDS,imgPtr) {
 var ImageList = new Array();
 if (IDS == 'BigFortunato') { ImageList = Fortunato; }
 if (IDS == 'BigMares') { ImageList = Mares; }
 document.getElementById(IDS).src=ImageList[imgPtr][0];
 document.getElementById(IDS).alt=ImageList[imgPtr][0];
 document.getElementById(IDS+'Caption').innerHTML = ImageList[imgPtr][1];
 // for testing purposes only
 // document.getElementById('test').innerHTML = IDS+':'+imgPtr+'&lt;br&gt;r1 '+rImage1Cnt+':'+rImage1+"&lt;br&gt;r2 "+rImage2Cnt+':'+rImage2;
 }
 
 var ImageSet; 
 var rImage1 = 0;  var rImage1Cnt = 0;
 var rImage2 = 0;  var rImage2Cnt = 0;
 function NextImage() {
 rImage1Cnt++;
 if (rImage1Cnt % 3 == 0) {
 /*  For sequential image displays */  rImage1 = ((rImage1+1) % Fortunato.length);
 /*  For randomized image displays */  // rImage1 = Math.floor(Math.random()*Fortunato.length);
 SetImage('BigFortunato',rImage1); 
 }
 rImage2Cnt++;  <br/>
 if (rImage2Cnt % 4 == 0) {
 /*  For sequential image displays */  rImage2 = ((rImage2+1) % Mares.length);
 /*  For randomized image displays */  // rImage2 = Math.floor(Math.random()*Mares.length);
 SetImage('BigMares',rImage2);
 }
 }
 function SetupTimers() { ImageSet = setInterval("NextImage()",1000); }
 function StopChanges() { clearTimeout(ImageSet); }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="SetupTimers()"&gt;
 &lt;table border="1" align="center"&gt;&lt;tr&gt;
 &lt;td&gt; &lt;img id="BigMares"
 src='http://www.westsierrahanoverians.com/images/wakanova_conf.jpg'
 alt='http://www.westsierrahanoverians.com/images/wakanova_conf.jpg'
 <i> &gt;</i>
 &lt;br&gt;&lt;span id="BigMaresCaption"&gt;Mares Caption&lt;/span&gt;
 &lt;/td&gt;
 
 &lt;td width="10%"&gt;&amp;nbsp;&lt;/td&gt;
 
 &lt;td&gt; &lt;img id="BigFortunato"
 src='http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg'
 alt='http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg'
 <i> &gt;</i>
 &lt;br&gt;&lt;span id="BigFortunatoCaption"&gt;Fortunato Caption&lt;/span&gt;
 &lt;/td&gt;
 &lt;/tr&gt;&lt;/table&gt;
 &lt;button onclick="StopChanges()"&gt;Stop Changes&lt;/button&gt;
 &lt;div id="test"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Change commented areas for random versus sequential displays.

Note, you might get faster response if you start your own threads

when you ask questions. Copy appropriate information or reference the old thread.

Some members avoid long or multi-page thread discussions after awhile. :eek:

Good Luck!

?

@urbancityrobMay 15.2009 — #Thanks for the help ? I think that would do the trick! I truly appreciate it.

@JMRKERMay 15.2009 — #Thanks for the help ? I think that would do the trick! I truly appreciate it.[/QUOTE]

You, too, are most welcome.

I'm glad I could help more the one person per thread.

Good Luck with your coding efforts.

?

@jokeFeb 01.2010 — #this helped me greatly!

brilliant, thanks, also thanks for the clear comments, helped me change the amount of pictures without trouble!

@JMRKERFeb 01.2010 — #this helped me greatly!

brilliant, thanks, also thanks for the clear comments, helped me change the amount of pictures without trouble![/QUOTE]

You, too, are most welcome.

Happy to help when I can.

Good Luck!

?

@dmtompkiFeb 17.2010 — #This is great. I'm working with the "Multiple Timed Galleries", is there anyway to have non-symetrical arrays? I have a need to display multiple galleries, but different amount of images...

Thanks for any help!

@JMRKERFeb 18.2010 — #This is great. I'm working with the "Multiple Timed Galleries", is there anyway to have non-symetrical arrays? I have a need to display multiple galleries, but different amount of images...

Thanks for any help![/QUOTE]

Post some code to give an example of what you are doing or trying to do.

Does not need to be entire program, just area that you are asking about.

@dmtompkiFeb 25.2010 — #I normalized the groups to make it work. However, I wanted to have inconsistent numbrs of images. So notice that set4 has 6 images and set5 has only 2 images. I tried to set the image list values to match, but it didn't work.

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

var interval = 4.5; // delay between rotating images (in seconds)

interval *= 1000;

var random_display = 0; // 0 = no, 1 = yes

var image_index = 0;

image_list = [ // 8 groups of 4 images --- Keep symetrical

["FWgraphics/thumb/conv09set2-thumb-1.jpg"],

["FWgraphics/thumb/conv09set2-thumb-2.jpg"],

["FWgraphics/thumb/conv09set2-thumb-3.jpg"],

["FWgraphics/thumb/conv09set2-thumb-4.jpg"],

["FWgraphics/thumb/conv09set3-thumb-1.jpg"],

["FWgraphics/thumb/conv09set3-thumb-2.jpg"],

["FWgraphics/thumb/conv09set3-thumb-3.jpg"],

["FWgraphics/thumb/conv09set3-thumb-4.jpg"],

["FWgraphics/thumb/conv09set4-thumb-1.jpg"],

["FWgraphics/thumb/conv09set4-thumb-2.jpg"],

["FWgraphics/thumb/conv09set4-thumb-3.jpg"],

["FWgraphics/thumb/conv09set4-thumb-4.jpg"],

["FWgraphics/thumb/conv09set4-thumb-5.jpg"],

["FWgraphics/thumb/conv09set4-thumb-6.jpg"],

["FWgraphics/thumb/conv09set5-thumb-1.jpg"],

["FWgraphics/thumb/conv09set5-thumb-2.jpg"],

["FWgraphics/thumb/conv09set6-thumb-1.jpg"],

["FWgraphics/thumb/conv09set6-thumb-2.jpg"],

["FWgraphics/thumb/conv09set6-thumb-3.jpg"],

["FWgraphics/thumb/conv09set6-thumb-4.jpg"],

["FWgraphics/thumb/conv09set7-thumb-1.jpg"],

["FWgraphics/thumb/conv09set7-thumb-2.jpg"],

["FWgraphics/thumb/conv09set7-thumb-3.jpg"],

["FWgraphics/thumb/conv09set7-thumb-4.jpg"],

["FWgraphics/thumb/conv09set9-thumb-1.jpg"],

["FWgraphics/thumb/conv09set9-thumb-2.jpg"],

["FWgraphics/thumb/conv09set9-thumb-3.jpg"],

["FWgraphics/thumb/conv09set9-thumb-4.jpg"],

["FWgraphics/thumb/conv09set10-thumb-1.jpg"],

["FWgraphics/thumb/conv09set10-thumb-2.jpg"],

["FWgraphics/thumb/conv09set10-thumb-3.jpg"],

["FWgraphics/thumb/conv09set10-thumb-4.jpg"] // Note: no comma after last entry

];

var number_of_image = image_list.length / 8; // array size / number of groups (8 for this example)

function generate(range) {

return Math.floor(Math.random() * range);

}

function getNextImage() {

if (random_display) {

image_index = generate(number_of_image); // 0..number of images in group

} else {

image_index = (image_index+1) % number_of_image;

}

return image_index;

}

function rotateImage(place) {

place = getNextImage();

document.getElementById('2image').src = image_list[place];

document.getElementById('3image').src = image_list[place+4];

document.getElementById('4image').src = image_list[place+8];

document.getElementById('5image').src = image_list[place+14];

document.getElementById('6image').src = image_list[place+16];

document.getElementById('6image').src = image_list[place+20];

document.getElementById('6image').src = image_list[place+24];

document.getElementById('6image').src = image_list[place+28];

place++;

var recur_call = "rotateImage("+place+")";

setTimeout(recur_call, interval);

}

</script>

@JMRKERFeb 25.2010 — #What does the layout of your HTML look like? How many images at one time? 8 or less?

Do you have an URL where the images can be accessed so that I can see changes occur?

I also noticed in your code ...

<i>
 </i>document.getElementById('2image').src = image_list[place];
 document.getElementById('3image').src = image_list[place+4];
 document.getElementById('4image').src = image_list[place+8];
 document.getElementById('5image').src = image_list[place+14];
 document.getElementById('6image').src = image_list[place+16];
 document.getElementById('6image').src = image_list[place+20];
 document.getElementById('6image').src = image_list[place+24];
 document.getElementById('6image').src = image_list[place+28];

You have duplicated id values. This will tend to overwrite the previous image setting.

@darknetschJan 07.2012 — #I know this is a necro post, but the information is by far the best I've found for doing multiple banners on one page. I've run into 2 minor issues for my site...so if anyone has any suggestions.

1) I can't seem to add href that rotates with the images without disabling the rotation...and I know it has to be something simple I'm missing

2) The other odd issue I'm running into is that the script is working fine in IE but doesnt seem to in FF or Chrome. I've even looked over to see if the script is just that out of date (hey it is from a necro post after all) and everthing seems to be in order.

Answer to these questions would be much appriciated. Here is what I've tweaked the script into so far:

[CODE]<html>
 <HEAD>
 <title>Rotating Banners</title>
 <!--
 Modified based on script by Jay Rumsey
 From: http://www.webdeveloper.com/forum/showthread.php?t=201788
 
 This script and many more are available free online at 
 The JavaScript Source!! http://javascript.internet.com
 -->
 <SCRIPT type="text/javascript" LANGUAGE="JavaScript">
 var interval = 5; // delay between rotating images (in seconds)
 interval *= 1000;
 var random_display = 0; // 0 = no, 1 = yes
 
 var image_index = 0;
 image_list = [  // 3 groups of 4 images --- Keep symetrical
 
 ["http://www.clan-dragon.org/images/4.jpg"],
 ["http://www.clan-dragon.org/images/1.jpg"],
 ["http://www.clan-dragon.org/images/2.jpg"],
 ["http://www.clan-dragon.org/images/3.jpg"],
 
 ["http://www.clan-dragon.org/images/b1.jpg"],
 ["http://www.clan-dragon.org/images/b2.jpg"],
 ["http://www.clan-dragon.org/images/b3.jpg"],
 ["http://www.clan-dragon.org/images/b4.jpg"],
 
 ["http://www.clan-dragon.org/images/b2.jpg"],
 ["http://www.clan-dragon.org/images/b3.jpg"],
 ["http://www.clan-dragon.org/images/b4.jpg"],
 ["http://www.clan-dragon.org/images/b1.jpg"],
 
 ["http://www.clan-dragon.org/images/b3.jpg"],
 ["http://www.clan-dragon.org/images/b4.jpg"],
 ["http://www.clan-dragon.org/images/b1.jpg"],
 ["http://www.clan-dragon.org/images/b2.jpg"]  // Note: no comma after last entry
 ];
 
 var number_of_image = image_list.length / 4;  // array size / number of groups (3 for this example)
 
 function generate(range) {
 return Math.floor(Math.random() * range);
 }
 function getNextImage() {
 if (random_display) {
 image_index = generate(number_of_image);  // 0..number of images in group
 } else {
 image_index = (image_index+1) % number_of_image;
 }
 return image_index;
 }
 function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Timage').src = image_list[place];
 document.getElementById('Limage').src = image_list[place+4];
 document.getElementById('Mimage').src = image_list[place+8];  // number of items in group (4 for this)
 document.getElementById('Rimage').src = image_list[place+12];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }
 </script>
 </HEAD>
 
 <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
 
 <BODY OnLoad="rotateImage(0)">
 
 <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
 
 <center>
 <img name="tImage" id='Timage' 
 src="http://www.clan-dragon.org/images/1.jpg" width=527 height=213><br>
 <img name="lImage" id='Limage' 
 src="http://www.clan-dragon.org/images/b2.jpg" width=165 height=245>
 <img name="mImage" id='Mimage'
 src="http://www.clan-dragon.org/images/b3.jpg" width=165 height=245>
 <img name="rImage" id='Rimage' 
 src="http://www.clan-dragon.org/images/b4.jpg" width=165 height=245>
 </center>
 
 <p><center>
 </center><p>
 </body>
 </html>[/CODE]

@JMRKERJan 07.2012 — #I know this is a necro post, but the information is by far the best I've found for doing multiple banners on one page. I've run into 2 minor issues for my site...so if anyone has any suggestions.

1) I can't seem to add href that rotates with the images without disabling the rotation...and I know it has to be something simple I'm missing

2) The other odd issue I'm running into is that the script is working fine in IE but doesnt seem to in FF or Chrome. I've even looked over to see if the script is just that out of date (hey it is from a necro post after all) and everthing seems to be in order.

Answer to these questions would be much appriciated. Here is what I've tweaked the script into so far:

...
[/QUOTE]
Can you specify what problems you are having a bit more.

I ran your post as is and it seems to be rotating fine for me.

I also checked out using FF browser and again no problems.

Specifically, are you getting any error messages?

Any other symptoms?

@darknetschJan 08.2012 — #Well I rechecked my FF. Seems my java was out of date so it stopping the local run of the code from rotating. Now that I got that working I entered it into the main site line by line and it works in a preview local version. Soon as I upload it to my host though the code stops rotating. I have other java codes on the same page so I made sure to check it for any over lapping code and cant find any. The site is www.clan-dragon.org...I cant post the full code here cause it is too long...any clues would be very helpful

@darknetschJan 08.2012 — #Eureka..I found the issue. Seems there was a piece of code burried for pop up on one of the title sections. So at least 1 issue is down...any hints on how to get the HREF to work properly?

@JMRKERJan 08.2012 — #Well I rechecked my FF. Seems my java was out of date so it stopping the local run of the code from rotating. Now that I got that working I entered it into the main site line by line and it works in a preview local version. Soon as I upload it to my host though the code stops rotating. I have other java codes on the same page so I made sure to check it for any over lapping code and cant find any. The site is www.clan-dragon.org...I cant post the full code here cause it is too long...any clues would be very helpful[/QUOTE]

Eureka..I found the issue. Seems there was a piece of code burried for pop up on one of the title sections. So at least 1 issue is down...any hints on how to get the HREF to work properly?[/QUOTE]

I'm not sure what java has to do with your problem as I only provided a javaSCRIPT solution,

but I'm glad you could figure out the problem before I could get back.

The link to posted to check your code is busted anyway. ?

Re-state your HREF problem. ?

@darknetschJan 08.2012 — #Clan-Dragon.org

I cant seem to get the HREF to link to the image and change as it rotates. When I try to add it I loose the images, or I can get 1 image to rotate but the href doesnt work properly. I'm still very much a novice at javascript programming so I'm not surprised I havent figured it out yet.

@JMRKERJan 08.2012 — #Where are your links and where are they to be taken when clicked upon? ?

This has nothing to do with your problem, but you could compress your logic a bit more by changing this:

<i>
 </i>&lt;script language="javascript"&gt;
 &lt;!-- 
 Today = new Date();
 TodayDay = Today.getDate();
 TodayMon = Today.getMonth();
 TodayYear = Today.getYear();
 
 if (TodayMon == 0) { TodayMonth = "January"; } 
 else if (TodayMon == 1) { TodayMonth = "February"; }
 else if (TodayMon == 2) { TodayMonth = "March"; }
 else if (TodayMon == 3) { TodayMonth = "April"; }
 else if (TodayMon == 4) { TodayMonth = "May"; }
 else if (TodayMon == 5) { TodayMonth = "June"; }
 else if (TodayMon == 6) { TodayMonth = "July"; }
 else if (TodayMon == 7) { TodayMonth = "August"; }
 else if (TodayMon == 8) { TodayMonth = "September"; }
 else if (TodayMon == 9) { TodayMonth = "October"; }
 else if (TodayMon == 10) { TodayMonth = "November"; }
 else if (TodayMon == 11) { TodayMonth = "December"; }
 else { TodayMonth = TodayMon; }
 
 document.write(TodayMonth + " " + TodayDay + ", " + TodayYear);
 
 --&gt;
 &lt;/script&gt;

to this:

<i>
 </i>&lt;script type="text/javascript"&gt;
 var Today = new Date();
 var Months = ['January','February','March','April','May','June',
 'July','August','September','October','November','December'];
 document.write(Months[Today.getMonth()] + " " + Today.getDate() + ", " + Today.getYear());
 
 &lt;/script&gt;

language='javascript' is deprecated

 are no longer necessary in newer browsers.

@darknetschJan 09.2012 — #I broke out the part I'm working on with the links. It wasnt on the site cause I try to keep stuff off of the final page until I get it fixed right...oh and BTW I appriciate all the help.

[CODE]<html>
 <HEAD>
 <title>Clan-Dragon.org Rotating Banners</title>
 <!--
 Modified based on script by Jay Rumsey
 From: http://www.webdeveloper.com/forum/showthread.php?t=201788
 
 This script and many more are available free online at 
 The JavaScript Source!! http://javascript.internet.com
 -->
 <SCRIPT type="text/javascript" LANGUAGE="JavaScript">
 var interval = 5000;
 var random_display = 0; // 0 = no, 1 = yes
 var image_index = 0;
 image_list = [  // 3 groups of 4 images --- Keep symetrical
 
 ["http://www.clan-dragon.org/images/4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 ["http://www.clan-dragon.org/images/1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 ["http://www.clan-dragon.org/images/2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"],
 ["http://www.clan-dragon.org/images/3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 
 ["http://www.clan-dragon.org/images/b1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 ["http://www.clan-dragon.org/images/b2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"],
 ["http://www.clan-dragon.org/images/b3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 ["http://www.clan-dragon.org/images/b4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 
 ["http://www.clan-dragon.org/images/b2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"],
 ["http://www.clan-dragon.org/images/b3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 ["http://www.clan-dragon.org/images/b4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 ["http://www.clan-dragon.org/images/b1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 
 ["http://www.clan-dragon.org/images/b3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 ["http://www.clan-dragon.org/images/b4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 ["http://www.clan-dragon.org/images/b1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 ["http://www.clan-dragon.org/images/b2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"]  // Note: no comma after last entry
 ];
 
 var number_of_image = image_list.length / 4;  // array size / number of groups (3 for this example)
 
 function generate(range) {
 return Math.floor(Math.random() * range);
 }
 function getNextImage() {
 if (random_display) {
 image_index = generate(number_of_image);  // 0..number of images in group
 } else {
 image_index = (image_index+1) &#37; number_of_image;
 }
 return image_index;
 }
 function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Timage').src = image_list[place][0];
 document.getElementById('Limage').src = image_list[place+4][0];
 document.getElementById('Mimage').src = image_list[place+8][0];     document.getElementById('Rimage').src = image_list[place+12][0]; // number of items in group (4 for this)
 document.getElementById('TLink').src = image_list[0][1];
 document.getElementById('LLink').src = image_list[0][1+4];
 document.getElementById('MLink').src = image_list[0][1+8];       document.getElementById('RLink').src = image_list[0][1+12];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }
 </script>
 </HEAD>
 
 
 <BODY OnLoad="rotateImage(0)">
 
 
 <center>
 <a id='TLink' target="_top">
 <img name="tImage" id='Timage' 
 src="http://www.clan-dragon.org/images/1.jpg" width=527 height=213><br></a>
 <a href="" id="LLink" target="_top">
 <img name="lImage" id='Limage' 
 src="http://www.clan-dragon.org/images/b2.jpg" width=165 height=245></a>
 <a href="" id="MLink" target="_top">
 <img name="mImage" id='Mimage'
 src="http://www.clan-dragon.org/images/b3.jpg" width=165 height=245></a>
 <a href="" id="RLink" target="_top">
 <img name="rImage" id='Rimage' 
 src="http://www.clan-dragon.org/images/b4.jpg" width=165 height=245></a>
 </center>
 
 <p><center>
 </center><p>
 </body>
 </html>[/CODE]

@JMRKERJan 09.2012 — #

<i>
 </i>function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Timage').src = image_list[place][0];
 document.getElementById('Limage').src = image_list[place+4][0];
 document.getElementById('Mimage').src = image_list[place+8][0];     document.getElementById('Rimage').src = image_list[place+12][0]; // number of items in group (4 for this)
 document.getElementById('TLink').src = image_list[0][1];
 document.getElementById('LLink').src = image_list[0][1+4];
 document.getElementById('MLink').src = image_list[0][1+8];       document.getElementById('RLink').src = image_list[0][1+12];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }

The above makes no sense to me.

You should be changing the href value of the links, not the src value!

Here is what I ASSUME you are trying to do, but I have no time to check it now.

I'll try to look at it further tomorrow.

<i>
 </i>function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Timage').src = image_list[place][0];
 document.getElementById('Limage').src = image_list[place+4][0];
 document.getElementById('Mimage').src = image_list[place+8][0];     <br/>
 document.getElementById('Rimage').src = image_list[place+12][0]; // number of items in group (4 for this)
 document.getElementById('TLink').src = image_list[place][1];
 document.getElementById('LLink').src = image_list[place+4][1];
 document.getElementById('MLink').src = image_list[place+8][1];       <br/>
 document.getElementById('RLink').src = image_list[place+12][1];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }

Code it totally untested at this time. :eek:

@darknetschJan 09.2012 — #JMRKR - You are a man amongst men...you have helped immensely. While the code you posted wasnt 100% accurate as you stated it wasnt tested but it did lead me to that answer. So here is the final coding needed for the multiple banners with href attached.

&lt;html&gt;
 &lt;HEAD&gt;
 &lt;title&gt;Clan-Dragon.org Rotating Banners&lt;/title&gt;
 &lt;!--
 Modified based on script by Jay Rumsey
 From: http://www.webdeveloper.com/forum/showthread.php?t=201788
 
 This script and many more are available free online at 
 The JavaScript Source!! http://javascript.internet.com
 --&gt;
 &lt;SCRIPT type="text/javascript"&gt;
 var interval = 5000;
 var random_display = 0; // 0 = no, 1 = yes
 var image_index = 0;
 image_list = [  // 3 groups of 4 images --- Keep symetrical
 
 ["http://www.clan-dragon.org/images/4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 ["http://www.clan-dragon.org/images/1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 ["http://www.clan-dragon.org/images/2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"],
 ["http://www.clan-dragon.org/images/3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 
 ["http://www.clan-dragon.org/images/b1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 ["http://www.clan-dragon.org/images/b2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"],
 ["http://www.clan-dragon.org/images/b3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 ["http://www.clan-dragon.org/images/b4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 
 ["http://www.clan-dragon.org/images/b2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"],
 ["http://www.clan-dragon.org/images/b3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 ["http://www.clan-dragon.org/images/b4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 ["http://www.clan-dragon.org/images/b1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 
 ["http://www.clan-dragon.org/images/b3.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=20"],
 ["http://www.clan-dragon.org/images/b4.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=19"],
 ["http://www.clan-dragon.org/images/b1.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=9"],
 ["http://www.clan-dragon.org/images/b2.jpg","http://www.clan-dragon.org/forum/forumdisplay.php?fid=14"]  // Note: no comma after last entry
 ];
 
 var number_of_image = image_list.length / 4;  // array size / number of groups (3 for this example)
 
 function generate(range) {
 return Math.floor(Math.random() * range);
 }
 function getNextImage() {
 if (random_display) {
 image_index = generate(number_of_image);  // 0..number of images in group
 } else {
 image_index = (image_index+1) % number_of_image;
 }
 return image_index;
 }
 function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Timage').src = image_list[place][0];
 document.getElementById('Limage').src = image_list[place+4][0];
 document.getElementById('Mimage').src = image_list[place+8][0];  <br/>
 document.getElementById('Rimage').src = image_list[place+12][0]; 
 document.getElementById('TLink').href = image_list[place][1];
 document.getElementById('LLink').href = image_list[place+4][1];
 document.getElementById('MLink').href = image_list[place+8][1];
 document.getElementById('RLink').href = image_list[place+12][1];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }
 &lt;/script&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;/HEAD&gt;
 
 
 &lt;BODY OnLoad="rotateImage(0)"&gt;
 
 
 &lt;center&gt;
 &lt;a name="TLink" id="TLink" href="http://www.clan-dragon.org/forum/forumdisplay.php?fid=9" target="_top"&gt;
 &lt;img src="http://www.clan-dragon.org/images/1.jpg" name="tImage" width=527 height=213 id='Timage'&gt;&lt;/a&gt;&lt;br&gt;
 
 <i>	</i>&lt;a name="LLink" id="LLink" href="http://www.clan-dragon.org/forum/forumdisplay.php?fid=14" target="_top"&gt;
 &lt;img name="lImage" id='Limage' 
 src="http://www.clan-dragon.org/images/b2.jpg" width=165 height=245&gt;&lt;/a&gt;
 
 <i>	</i>&lt;a name="MLink" href="http://www.clan-dragon.org/forum/forumdisplay.php?fid=20" id="MLink" target="_top"&gt;
 &lt;img name="mImage" id='Mimage'
 src="http://www.clan-dragon.org/images/b3.jpg" width=165 height=245&gt;&lt;/a&gt;
 
 <i>	</i>&lt;a name="Link" href="http://www.clan-dragon.org/forum/forumdisplay.php?fid=19" id="RLink" target="_top"&gt;
 &lt;img name="rImage" id='Rimage' 
 src="http://www.clan-dragon.org/images/b4.jpg" width=165 height=245&gt;&lt;/a&gt;
 &lt;/center&gt;
 
 &lt;p&gt;&lt;center&gt;
 &lt;/center&gt;&lt;p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Again thank you for all your time and effort regarding this. A thousand thank yous would never be enough.

@JMRKERJan 09.2012 — #You're most welcome.

Happy to help.

Good Luck!

?

Just FMI, what changes did you make?

I responded to your request just before midnight my time and needed the sleep for an early day.

Perhaps one more coffee would have gotten me to the correct answer.

?

@darknetschJan 10.2012 — #well first I took your change to set the "reference" area be in the correct area. Then it dawned on me that I needed it to look for an HREF reference not an SRC reference. So I changed it from:

document.getElementById('TLink').[B]src[/B] = image_list

to

document.getElementById('TLink').[B]HREF[/B] = image_list

Then just to make sure I made a duplicate of the src line so it would have a name on the line, an id, and the correct Href to start the rotation with. I am kinda curious about how much more difficult it would be to add an ALT tag that rotates with the image as well...hmmm Let me know if you have any ideas on that one

@JMRKERJan 10.2012 — #well first I took your change to set the "reference" area be in the correct area. Then it dawned on me that I needed it to look for an HREF reference not an SRC reference. So I changed it from:

document.getElementById('TLink').[B]src[/B] = image_list

to

document.getElementById('TLink').[B]HREF[/B] = image_list

Then just to make sure I made a duplicate of the src line so it would have a name on the line, an id, and the correct Href to start the rotation with. I am kinda curious about how much more difficult it would be to add an ALT tag that rotates with the image as well...hmmm Let me know if you have any ideas on that one[/QUOTE]

The change you made was exactly what I recommended.

So what did you "correct" in the code I sent that needed fixing

since you stated it was not "100% accurate" ??? ?

As to your question about the 'alt' tag, there would be no problem doing this. ?

I'm not sure I understand WHY it would be needed as it only gets displayed

when the image cannot be found or because it is not available. All your

images seem to be displayed, so the use of alt would never be needed. :eek:

@darknetschJan 10.2012 — #<<again still a novice so if you said what really needed to be done and I misunderstood but got to the same point you were leading me to then many more thanks. What I meant about the code was that you still had the SCR on there but changed the point of the [place]...so I didnt realize that was what you meant till I made the change and it worked. So again many many thanks.

The only reason I would use the alt tag would be for the blind so their computers could tell them what the images "are".

Once again you are a wonderful mentor for this. You are the ONLY person online that has actually answered this question for I'd hate to tell you how many google & yahoo searches I looked through just to get one piece of coding done.

@JMRKERJan 10.2012 — #You're welcome again.

I had forgotten that the alt could be used for that purpose.

You could try this...

<i>
 </i>function rotateImage(place) {
 place = getNextImage();
 document.getElementById('Timage').src = image_list[place][0];
 document.getElementById('Limage').src = image_list[place+4][0];
 document.getElementById('Mimage').src = image_list[place+8][0];  <br/>
 document.getElementById('Rimage').src = image_list[place+12][0]; 
 
 document.getElementById('Timage').alt = image_list[place][0];
 document.getElementById('Limage').alt = image_list[place+4][0];
 document.getElementById('Mimage').alt = image_list[place+8][0];  <br/>
 document.getElementById('Rimage').alt = image_list[place+12][0]; 
 
 document.getElementById('TLink').href = image_list[place][1];
 document.getElementById('LLink').href = image_list[place+4][1];
 document.getElementById('MLink').href = image_list[place+8][1];
 document.getElementById('RLink').href = image_list[place+12][1];
 place++;
 var recur_call = "rotateImage("+place+")";
 setTimeout(recur_call, interval);
 }

You could even create a 3rd element in the 'image_list' array

and reference it like this...

<i>
 </i>  document.getElementById('Timage').alt = image_list[place][2];
 ... etc...

Try it and see how it works.

If you have trouble, post back again.

Good Luck! ?

@darknetschJan 20.2012 — #It's been a few days but I got back to this project. I used your 2nd coding option since it allows me to give a more personalized message for the images. And it works PERFECTLY. Thank a million times again with this.

@JMRKERJan 20.2012 — #It's been a few days but I got back to this project. I used your 2nd coding option since it allows me to give a more personalized message for the images. And it works PERFECTLY. Thank a million times again with this.[/QUOTE]

No problem.

I'm glad it worked out for you after so many posts on this thread.

Good Luck!

?

Also in #JavaScript _↴

JavaScript Menus Hiding Javascript Code Correct this code plzzzzzzz about disabling a textbox

Success!

Help @08hirobinj spread the word by sharing this article on Twitter...

Tweet This

Help with multiple rotating images?

54 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with multiple rotating images?

54 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

54 Comments(s) _↴

Also in #JavaScript _↴