Multiple pictures changing... Will paypal for help [Archive]

basskid

04-12-2005, 05:49 AM

Howdy guys... I'm new to the JS scene, and this one has got me confused as hell. This is my "test" site where I throw up new mods n stuff before I put them on my real site... www.angling101.com/a101

Up on the top, I want the 2 side banners to swap images every 3 seconds, following a set pattern. I can get the one side to rotate, but form what I understand I will not be able to run both sides at the same time. Is there any way you guys can throw some tips my way so I can get this up and running? (All of my java has been self taught, so I'm sure I missed alot) :thumbsup:

Here's the script I used, called jel.js

function navChange(imgName,imgSrc){
document.images[imgName].src = imgSrc;
}

function bustAmove(){
y = document.images.length;
z = 0;
while(z < y){
if(!document.images[z].complete){
z++
}
else{
setTimeout("run('1')",3000);
break;
}
}
}

function run(t){
if(t == "1"){
setTimeout("run('2')", 3000);
document.getElementById("rotator").src = img2.src;
}
else if(t == "2"){
setTimeout("run('3')", 3000);
document.getElementById("rotator").src = img3.src;
}
else if(t == "3"){
setTimeout("run('4')", 3000);
document.getElementById("rotator").src = img4.src;
}
else if(t == "4"){
setTimeout("run('5')", 3000);
document.getElementById("rotator").src = img5.src;
}
else if(t == "5"){
setTimeout("run('6')", 3000);
document.getElementById("rotator").src = img1.src;
}
else if(t == "6"){
setTimeout("run('7')", 3000);
document.getElementById("rotator").src = img6.src;
}
else if(t == "7"){
setTimeout("run('1')", 3000);
document.getElementById("rotator").src = img7.src;
}

}

Here's what I have in the header to load the images b4 the page lods

<script language="javascript">
var img1 = new Image();
img1.src = "http://www.angling101.com/a101/images/randomban/donbanner.jpg";

var img2 = new Image();
img2.src = "http://www.angling101.com/a101/images/randomban/gatlogo.jpg";

var img3 = new Image();
img3.src = "http://www.angling101.com/a101/images/randomban/glowmatesb.jpg";

var img4 = new Image();
img4.src = "http://www.angling101.com/a101/images/randomban/grandtlogo.jpg";

var img5 = new Image();
img5.src = "http://www.angling101.com/a101/images/randomban/henryslogo.jpg";

var img6 = new Image();
img6.src = "http://www.angling101.com/a101/images/randomban/sarleybannerc.jpg";

var img7 = new Image();
img7.src = "http://www.angling101.com/a101/images/randomban/ww230.jpg";

</script>
<script language="javascript" SRC="jel.js"></script>

Here's what I use in my page header to initiate the java upon page load completion:

<body onload="bustAmove()" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

And here's what I am trying to use to call my banners.

<table class="forumline" width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="left"><img src="images/randomban/donbanner.jpg" alt="rotator" id="rotator"></td><td align="center"><img src="images/logoz.jpg" width="330" height="200" border="0"></td><td align="right"><img src="images/randomban/donbanner.jpg" alt="rotator" id="rotator"></td>
</tr>

Any help would be most appreciated..... THANKS A WHOLE BUNCH!!! :cool:

I'll paypal 20 bux to the first guy to successfully help me. :thumbsup:

basskid

04-13-2005, 12:27 AM

I did some more editing on my own and I thought I had this licked, but when I uploaded the new script I found out that the other side was rotating instead of the first.... Any ideas? TIA for any help... :confused:

function navChange(imgName,imgSrc){
document.images[imgName].src = imgSrc;
}

function bustAmove(){
y = document.images.length;
z = 0;
while(z < y){
if(!document.images[z].complete){
z++
}
else{
setTimeout("run('1')",3000);
break;
}
}
}

function run(t){
if(t == "1"){
setTimeout("run('2')", 3000);
document.getElementById("rotator1").src = img2.src;
}
else if(t == "2"){
setTimeout("run('3')", 3000);
document.getElementById("rotator1").src = img3.src;
}
else if(t == "3"){
setTimeout("run('4')", 3000);
document.getElementById("rotator1").src = img4.src;
}
else if(t == "4"){
setTimeout("run('5')", 3000);
document.getElementById("rotator1").src = img5.src;
}
else if(t == "5"){
setTimeout("run('6')", 3000);
document.getElementById("rotator1").src = img1.src;
}
else if(t == "6"){
setTimeout("run('7')", 3000);
document.getElementById("rotator1").src = img6.src;
}
else if(t == "7"){
setTimeout("run('1')", 3000);
document.getElementById("rotator1").src = img7.src;
}

}

function run(t){
if(t == "1"){
setTimeout("run('2')", 3000);
document.getElementById("rotator2").src = img2.src;
}
else if(t == "2"){
setTimeout("run('3')", 3000);
document.getElementById("rotator2").src = img3.src;
}
else if(t == "3"){
setTimeout("run('4')", 3000);
document.getElementById("rotator2").src = img4.src;
}
else if(t == "4"){
setTimeout("run('5')", 3000);
document.getElementById("rotator2").src = img5.src;
}
else if(t == "5"){
setTimeout("run('6')", 3000);
document.getElementById("rotator2").src = img1.src;
}
else if(t == "6"){
setTimeout("run('7')", 3000);
document.getElementById("rotator2").src = img6.src;
}
else if(t == "7"){
setTimeout("run('1')", 3000);
document.getElementById("rotator2").src = img7.src;
}

}

PS: I also edited my calls in the header to reflect the changes in my id's