Hi, based on some reviews I recently got in the "Website Reviews" Section of this site, I am trying to upgrade my website's index, starting with a CSS/Javascript Carousel instead of the semi-funtioning Flash one I made recently with little practice on a copy of MX. I used a tutorial for the functionality of the carousel (viewable here: http://www.builderau.com.au/program/javascript/soa/Build-a-carousel-with-JavaScript/0,339028434,339271770,00.htm), and got my result to look like this. This works fine for what I need right, now, however, for some reason whenever I try to use a background image from my own site it fails, while an image from any other site works fine. I have pasted the code below, the first 3 images(called #story1,#story2,#story3) use the original images and work fine, I have also tested them with the Google logo and a few pictures from Facebook and they were properly imported. However, #story4 uses an image from my website and it does not load. This remains the same for every image from my website. Can anybody tell me how? It's keeping me from moving forward. Thanks! <html> <head> <title>The CIA</title> <style> .storydiv { height:182px; width:355px; padding-left:175px; top:0px; left:0px; } #story1 { background:url(http://www.builderau.com.au/i/s/cov/securitychain170110.gif) no-repeat; } #story2 { background:url(http://www.builderau.com.au/i/s/cov/browser170110.jpg) no-repeat; } #story3 { background:url(http://www.builderau.com.au/i/s/cov/dotnet170110.gif) no-repeat; } #story4 { background:url(http://www.fauxsaics.com/images/Logo.jpg) no-repeat; } .storyDesc{ padding-top: 10px; padding-right: 8px; display:block; } .fStory { padding-top: 10px; display:block; font-weight:bold; } #nav { font-size:12px; position:absolute; top:100px; left:325px; } .selStory { background:#eee; border:1px solid #777; } </style> <script> var stor = -1; var maxstor = 3; var timeout = 3500; function autorot() { showNext(); timeout = setTimeout('autorot();', timeout); } function rotateDiv(stor){ var divs = document.getElementById("storyContainer").getElementsByTagName("div"); for (var i=0; i < divs.length; i++ ) { var div = divs[i]; if ( (div.id != "")) { if(i != stor){ div.style.display = "none"; } else{ div.style.display = "block"; } } } } function showNext(){ if(stor < maxstor) stor++; else stor=0; rotateDiv(stor); } function showNext(){ if(stor < maxstor) stor++; else stor=0; rotateDiv(stor); } function stoprot() { clearTimeout(timeout); } function showNext(){ if(stor < maxstor) stor++; else stor=0; rotateDiv(stor); } function showPrev(){ if(stor > 0) stor--; else stor=maxstor; rotateDiv(stor); } function showStoryOne(){ stor=0; rotateDiv(stor); } function showStoryTwo(){ stor=1; rotateDiv(stor); } function showStoryThree(){ stor=2; rotateDiv(stor); } function showStoryFour(){ stor=3; rotateDiv(stor); } function rotateDiv(stor){ var divs = document.getElementById("storyContainer").getElementsByTagName("div"); for (var i=0; i < divs.length; i++ ) { var div = divs[i]; if ( (div.id != "")) { if(i != stor){ div.style.display = "none"; } else{ div.style.display = "block"; } } } var spans = document.getElementById("nav").getElementsByTagName("span"); for (var i=0; i < spans.length; i++ ) { var span = spans[i]; if ( (span.id != "")) { if(i != stor) span.className = "none"; else span.className = "selStory"; } } } </script> </head> <body onload="autorot()"> <div id="storyContainer"> <div id="story1" class="storydiv"> <a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a> <span class="storydesc"> Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.</span> <span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span> </div> <div id="story2" class="storydiv"> <a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a> <span class="storydesc"> Find an Aussie user group near you with our new Google maps interface.</span> <span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span> </div> <div id="story3" class="storydiv"> <a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a> <span class="storydesc"> Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.</span> <span class="fstory"><a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm">Full story</a></span> </div> <div id="story4" class="storydiv"> <a href="example1.jpg" class="ched">Understand CSS</a> <span class="storydesc"> Before diving into CSS learn<br/>some of the core drivers and concepts.</span> <span class="fstory"><a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm">Full story</a></span> </div> </div> <div id="nav"><a href="javascript:showPrev()" onClick="stoprot()"><< Prev</a> | <span id="nav1"><a href="javascript:showStoryOne()" onClick="stoprot()">1</a></span> | <span id="nav2"><a href="javascript:showStoryTwo()" onClick="stoprot()">2</a></span> | <span id="nav3"><a href="javascript:showStoryThree()" onClick="stoprot()">3</a></span> | <span id="nav4"><a href="javascript:showStoryFour()" onClick="stoprot()">4</a></span> | <a href="javascript:showNext()" onClick="stoprot()">Next >></a></div> </body> </html> Code (markup):
I can see the image from your site fine, but there is a bigger problem. When the carousel starts it goes at a crazy speed. This line is causing that to happen: timeout = setTimeout('autorot();', timeout); That is bad because the timeout value is changed to the ID returned by setTimeout. In the tutorial demo, that line has been changed to this: timeout = setTimeout('autorot();', 3500);
Thank you! Actually by saying that it appeared fine you made me realize that it was a computer problem(for some reason pictures don't load on my website on my computer specifically on firefox. Still working out why) Also I did notice that it span out of control occasionally and you're advice fixed that too
Yep, it's working fine now. Thanks for the rep You might find a solution to that problem on this page: MozillaZine - Images or animations do not load
Did you find a problem? - Before the start of javascript code, all the images are downloaded and stacked one by one for a while. You may overcome this by settinging the 1st image visible {display:block} and all others invisible {display:none} before the start of javascript A demo http://www.pagecolumn.com/webparts/slideshow.htm