rotating banner - preload images??

Hi ,, I built a page that rotates an array of banners and animates them a little.
It works fine when it's ofline and im taking the images localy but when i try to take it from the web it doesn't work.
I'm attaching the code.  thanks!!!
<html>
<head>
      <title>Untitled</title>

</head>

<body>



</body>
</html>
<script language="JavaScript">
/////////////start the banner  identifier and member are for administration use
banner('1','promo');

function banner(identifier,member){
//array of banners taken online----->
var dropimages=new Array()
dropimages[0]="http://banner.clubdicecasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=cdc468x3";
dropimages[1]="http://crbanner.casinopays.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=car468x3";
dropimages[2]="http://banner.monacogoldcasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=mg468";
dropimages[3]="http://banner.usacasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=usa468";
dropimages[4]="http://banner.newyorkcasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=nyc468";
//array of banners taken from a local folder (WORKS!!)
var imgarr=new Array()
imgarr[0]="images/CDCen46871.gif";
imgarr[1]="images/CDCen46863.gif";
imgarr[2]="images/CDCen46864.gif";
imgarr[3]="images/CDCen46865.gif";
imgarr[4]="images/CDCen46866.gif";
//<!-----array of links to use afor the <a href:</a> ---->
var linksarr=new Array()
linksarr[0]="http://banner.clubdicecasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=cdc468x3";
linksarr[1]="http://crbanner.casinopays.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=car468x3";
linksarr[2]="http://banner.monacogoldcasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=mg468";
linksarr[3]="http://banner.usacasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=usa468";
linksarr[4]="http://banner.newyorkcasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=nyc468";

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
      preloadedimages[p]=new Image()
      preloadedimages[p].src=dropimages[p]
      if(preloadedimages[dropimages.length-1]){
            createscrollingdiv('1','468','60', preloadedimages, linksarr);
            }
      }
}


function createscrollingdiv(identifier,slideshow_width,slideshow_height, arr, links){
      i=0;
      document.write('<div id=main'+identifier+' style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden;>')
            document.write('<div id=bellow'+identifier+' style="position:relative;width:'+slideshow_width+';top:0px;visibility:visible;z-index:0;">')
            document.write('<a href="http://banner.clubdicecasino.com/cgi-bin/redir.cgi?id=N">')
            document.write('<img id=butimg'+identifier+' src="'+arr[i].src+'" ></a></div>');
            document.write('<div name=above id=above'+identifier+' style="position:relative;width:'+slideshow_width+';top:-'+slideshow_height+';visibility:visible;z-index:1">')
            document.write('<a id=abovelink'+identifier+' href=javascript:rotatelink('+identifier+')>');
            document.write('<img id=aboveimg'+identifier+' src="'+arr[i+1].src+'" ></a>')
            document.write('</div>');      
      document.write("</div>")
      ////////////////// hidden table containing data/////////////////////
      document.write('<table style="visibility:hidden" >')
      document.write('<tr>')
      for (p=0;p<arr.length;p++){
      document.write('<td id=td"'+p+'idnt'+identifier+'" >'+arr[p].src+'</td>')
      document.write('<td id=tdl"'+p+'idnt'+identifier+'" >'+links[p]+'</td>')
      }      
      document.write('</tr>')            
      document.write('</table>')
      document.write('<input type="hidden" name="currimg'+identifier+'" id="currimg'+identifier+'" value="1">')      
      document.write('<input type="hidden" name="imgheight'+identifier+'" id="imgheight'+identifier+'" value="'+slideshow_height+'">')            
      document.write('<input type="hidden" name="arrlength'+identifier+'" id="arrlength'+identifier+'" value="'+arr.length+'">')      
      scrolltopimage(identifier);
      ////////////////////////END hidden table ///////////////////////////
}
function scrolltopimage(identifier){//////////////////function that scrolls the top image down to position:0
      positioning=document.getElementById('above'+identifier);
      ////////////////////// CHANGEABLE  change the integer to manipulate animation speed /////////////////
      positioning.style.top=parseInt(positioning.style.top)+8;
      ///////////////////////////////////////////////////////////////////////////////////////////////////
      if(parseInt(positioning.style.top)/8>-1){
            positioning.style.top=0;
            setTimeout("changeimage("+identifier+")",3000);      
      }
      else if(parseInt(positioning.style.top)<-1){
            setTimeout("scrolltopimage("+identifier+")",50);            
      }
}
//////////////function that changes the top image to the next image in the array and the buttom immage to the last one
function changeimage(identifier){
      curr_img=document.getElementById('currimg'+identifier).value;
      if(parseInt(curr_img)+1==parseInt(document.getElementById('arrlength'+identifier).value))
            curr_img=0;
      else      
            curr_img++;
      img=document.getElementById('td"'+curr_img+'idnt'+identifier+'"');
      nlink=document.getElementById('tdl"'+curr_img+'idnt'+identifier+'"');      
      if(eval(curr_img)>0)
            last_img=eval(curr_img)-1;
      else      
            last_img=parseInt(document.getElementById('arrlength'+identifier).value)-1;
            
      bimg=document.getElementById('td"'+last_img+'idnt'+identifier+'"');
      document.getElementById('above'+identifier).style.top=(-document.getElementById('imgheight'+identifier).value);
      document.getElementById('aboveimg'+identifier).src=img.innerHTML;
      document.getElementById('abovelink'+identifier).src=nlink.innerHTML;
      document.getElementById('butimg'+identifier).src=bimg.innerHTML;      
      document.getElementById('currimg'+identifier).value=curr_img;
      uploadedimage=new Image();
      uploadedimage.src=img.innerHTML;
      if(uploadedimage){
      scrolltopimage(identifier);
      }
}
function rotatelink(identifier){//////////   function that opens the linked url (onclick)
indx=parseInt(document.getElementById('currimg'+identifier).value)
newindow=document.getElementById('tdl"'+indx+'idnt'+identifier+'"').innerHTML
window.location=newindow;
}
</script>


5visionsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GwynforWebCommented:
Here is the problem

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
     preloadedimages[p]=new Image()
     preloadedimages[p].src=dropimages[p]      <--------------the .src must be a GIF, JPEG or BMP
     if(preloadedimages[dropimages.length-1]){
          createscrollingdiv('1','468','60', preloadedimages, linksarr);
          }
     }
}




Do this, put these just ater the body tag

<body onload='preloadBans()'>
<IMG stye="display:none><IMG stye="display:none><IMG stye="display:none><IMG stye="display:none>

then have the preload function as

function preloadBans(){
for (i=0;i<5;i++)
   document.images[i].src=dropimages[i]
}

0
GwynforWebCommented:
you need 1 more  <IMG stye="display:none>, sorry
0
GwynforWebCommented:
crap, I am missing a " as well :-(, you want 5   <IMG stye="display:none"> just after the body tag. ie 5 hidden images the banners are loaded into.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

5visionsAuthor Commented:
thanks but didnt work :-[ ???
0
5visionsAuthor Commented:
If you copy and paste the code you can see the problem there , im only guessing that the problem is in the preloader because it worked nicely offline. but maybe its something else.  
anyways ive been trying many things with no success. any help would be appreciated ////// thanks!!
0
robotman757Commented:
this is weird because I copied te code into my frontpage 2003 and it all worked except one of the images did not load. I think about 4 of them did...i just previed the page...it might be that sometimes the images are not loading fast enought, and you may need to find some way to change an image that did not load...so far I can't find the problem, but I am still looking
0
robotman757Commented:
looks like when I do this, the middle image is the problem dropimages[2] ..it keeps trying to load a page and not a picture. The other four pictures load fine even without the stuff after the '?'
0
5visionsAuthor Commented:
the code is woking but the problem is that its not running smoothly , when i run banners located localy it runs good but when i run banners from the web , some jumping accure and it doesnt look good,, also the banner that doesnt load because its a little larger then the other 4 but my thoughts are that a working preloader would fix that.
0
robotman757Commented:
When i tried to load each image, the 3rd one loaded a full web page, but it may have been something i did. What you may need to do is to load the images before running the banner. It may be that you need to put in some kind of timer before you start the banner..just a thought...
0
5visionsAuthor Commented:
Hi all ,, im willing to add more points if someone can explain how to do it.

I need a working version of the code attached, there is a bug there that i couldnt figure out but i need the code or any simmilar code that does the same effect , takes an array of banners and rotates them in a scroller animation-- it has to be independent so i can build a few rotating banners in one page.  Thanks!!!!!
0
robotman757Commented:
Your code works fine for me with no problems as long as I change the 3rd image to something else. i just copied the 4th image line into the 3rd one and there are no problems. It looks great too!!
0
ziffgoneCommented:
Hi 5visions,

@robotman757 -
"When i tried to load each image, the 3rd one loaded a full web page, but it may have been something i did."

- The web page is set up so if the "member" value in the URL string is not found it will redirect to the web page. If you click here, it will load correctly:

http://banner.monacogoldcasino.com/cgi-bin/banner.cgi?id=N&member=member&profile=mg468

@5visions -

- I'm afraid I have bad news for you, you will absolutely NOT be able to preload these images directly. With the links you have, each site is connecting to a CGI banner rotator itself redirecting to a different banner each time. Because the link is not set directly to an image, it won't preload. If the CGI script were simply spewing out the random image, it would prbably work, but because it redirecting, it will not work to preload using those links.

Don't fear though, I'm working something out for you, so hang tight and I'll get back to you with a solution.

Regards...

ziff..................................................................gone.
0
robotman757Commented:
That's okay..I have a broadband connection and maybe that is why the script was working fine for me once I changed the 3rd picture...I was able to get the 3rd picture to load by plugging in the values correctly, but noticed that the other four did not seem to need any values and just worked correctly. All is well though from what I see...
0
ziffgoneCommented:
Hi 5visions,

Alright, having downloaded a bunch of the Casino Banners, I have put together a package for you with a JS file, the Banner Images, and instructions for use. Check out the Example page, and if you like the effect, download the package.

The JS File also contains instructions for setting modifications to your liking. I've used the Affiliate Links you gave in your example above, all you need to do is set your "member" name in the JS File.

http://www.webmastereseller.com/test/rotator/

Hope that helps.

Regards...

0
5visionsAuthor Commented:
 
Thanks for the code and the explanations,, I understand from the code that you get the images from a local folder:
 
  document.getElementById('bannerDiv').innerHTML='<a href="'+link+'"><img src="banner'+Banner+'_'+curBanner+'.gif" style="width:468px;height:60px;border:none;margin:0px;"></a>';

and the var Banner stands for the path to that folder.

-----what i need to do is to get these banners from the http , I don't have them localy-------------
As for the problem with the preloader i think you are right, it won't preload unless its a .gif , thanks for the help , hope you can make it work for http pathes

0
ziffgoneCommented:
Don't give up yet 5visions,

I have included all of the banners within the package at the above URL. Simply download, extract and then upload them to your web host and host them locally as I have. Full instructions are included.

Regards...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.