?
Solved

Javascript DOM assigned images appearing jumbled or not at all

Posted on 2008-06-23
7
Medium Priority
?
663 Views
Last Modified: 2013-12-25
go to http://www.easyridercharter.com/main.php

You will see that it auto-plays a slideshow of 6 images with a 3 second delay in between each image.

My problems are that the images are appearing jumbled (ie: image 2, 3) and one image is not displaying at all (image 6). The strange thing is that on my local machine, I do not run into either of these issues with the images.

Is there any way to resolve this so that all 6 images display cleanly? My code is below:
(The html image I am changing on the fly has id "mainimage" and I am changing the src of that image from within the javascript function "setImage")
---- HTML - Main.php ----
 
<html>
<head>
<title>Easy Rider Charter - Main Page</title>
</head>
 
<body style="position:relative;left:10px;">
<script language='JavaScript'>
var aimages = new Array();
var nlastview = 6;
aimages['0,src']='images/side_view1.jpg';
aimages['0,wth']=725;
aimages['0,hgt']=300;
aimages['0,txt']='';
aimages['1,src']='images/cabin_view1.jpg';
aimages['1,wth']=575;
aimages['1,hgt']=300;
aimages['1,txt']='';
aimages['2,src']='images/dining_view1.jpg';
aimages['2,wth']=575;
aimages['2,hgt']=300;
aimages['2,txt']='';
aimages['3,src']='images/aftdeck_view1.jpg';
aimages['3,wth']=575;
aimages['3,hgt']=300;
aimages['3,txt']='';
aimages['4,src']='images/stateroom3_view1.jpg';
aimages['4,wth']=575;
aimages['4,hgt']=300;
aimages['4,txt']='';
aimages['5,src']='images/master_br_view1.jpg';
aimages['5,wth']=585;
aimages['5,hgt']=260;
aimages['5,txt']='The full beam master suite features a king bed, and his and her baths separated by a double shower. The VIP stateroom has a queen berth and the guest stateroom has twin berths. Crew quarters are separate.';
</script>
<script type="text/javascript" src="include/libUtils.js"></script>
<script type="text/javascript" src="include/mainEffects.js"></script>
<script type="text/javascript" src="include/typeText.js"></script>
<script type="text/javascript" src="include/wz_tooltip.js"></script>
 
<div id="divhdr" align="top" style="position:relative;width:725px;left:5px;top:-10px;font-family:impact;font-size:32px;font-weight:bold;font-style:italic;color:maroon;">
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <span id="typeHdrEasy">E a s y</span><span>&nbsp&nbsp&nbsp</span><span id="typeHdrRider">R i d e r</span><span>&nbsp&nbsp</span>
 
</div>
 
<div style="position:relative;top:-17px;">
<hr color="maroon" size="1px">
</div>
 
<div id="divmainlinks" style="position:relative;top:-24px;padding:3px;">
<a href="main.php">Pictures / Main Page</a> &nbsp
<a href="specs.php" style="left:20px;">Yacht Specifications</a> &nbsp
<a href="calendar.php" style="left:30px;">Availability Calendar</a> &nbsp
<a id="arefcontact" href="contact.php" onmouseover="Tip('Contact owner regarding reservations or any questions')"
onmouseout="UnTip()" style="left:40px;">Request Information</a>
 
</div>
 
<div id="bodybegtxt" style="position:relative;top:-36px;width:725px;height:100px;">
<p>
Easy rider is a beautiful 72-foot Horizon motor yacht that is available for chartering year round.
The yacht contains comfortable lounging on the foredeck, al fresco dining and lounging
on the aft deck and fly bridge plus more formal dining inside. A central entertainment system provides music throughout the yacht,
and there are satellite TVs and stereos in each of the 3 double staterooms. There are total accommodations for up to six guests.
</p>
<br>
</div>
 
 
<div id="divimages" z-index="3" style="position:relative;top:-26px;width:725px;height:300px;font-style:italic;font-size:12px;">
<img id="mainimage" z-index="100" src="images/side_view1.jpg" alt="Side View" style="width:725px;height:300px;background:white;">
<div id="divimgtxt" style="display:none;width:585px;position:relative;">
</div>
</div>
 
<div id="divviewnav" z-index="2" style="position:absolute;top:155px;width:275px;font-size:12px;">
 
<img id="imgplay" onclick="startSlideShow()" onmouseover="Tip('Play / Restart Slide Show')" onmouseout="UnTip()" alt="Play / Restart Slide Show" src="play_button_maroon.bmp" style="position:absolute;top:-3px;cursor:pointer;cursor:hand;">
<img id="imgstop" onclick="setImage('S')" onmouseover="Tip('Stop Slide Show')" onmouseout="UnTip()" alt="Stop Slide Show" src="stop_button_maroon.bmp" style="position:absolute;left:26px;top:-3px;cursor:pointer;cursor:hand;">
<img id="imgback" onclick="setImage('P')" onmouseover="Tip('Previous Image')" onmouseout="UnTip()" alt="Previous Image" border="0" src="back_arrow_maroon.bmp" style="position:absolute;left:64px;cursor:pointer;cursor:hand;">
<span id="spanviewnum" style="position:absolute;left:84px;color:black;font-weight:bold;">1 of 4</span>
<img id="imgforward" onclick="setImage('N')" onmouseover="Tip('Next Image')" onmouseout="UnTip()" alt="Next Image" border="0" src="forward_arrow_maroon.bmp" style="position:absolute;left:117px;cursor:pointer;cursor:hand;">
</div>
 
<div id="bodyendtxt" style="position:absolute;top:480px;width:725px">
The boat is currently located at Ventura Harbor Marina situated front and center,
and can also be chartered or returned to an approved list of alternative
Southern California origination/destination points for additional charges.
Click "Request Information" link at top of the page to inquire about
charter reservations or any questions regarding Easy Rider.
</div>
 
<div style="position:relative;top:66px;font-size:10px;width:725;text-align:right;">
Site Design by 44 Drive, Inc. (contact at 4444dr@gmail.com)
</div>
 
 
<script type="text/javascript">
if ((navigator.appVersion.indexOf('MSIE 7.')==-1) ? false : true) {
     runIE7Tweaks();
}
startSlideShow();
</script>
 
</body>
</html>
 
---- Javascript - MainEffects.js ----
 
var ncurview = 1;
var nviewincrement = 300;
var nviewdelaysecs = 3;
 
var ahdrTimeOuts= new Array();
var asswTimeOuts= new Array();
var alnkTimeOuts= new Array();
 
var nhdrTimeOut = -1;
var nsswTimeOut = -1;
var nlnkTimeOut = -1;
 
function preloader() {
     for(loadall=0; loadall<nlastview; loadall++) {
          var LoadedImage=new Image();
          LoadedImage.src=aimages[loadall+',src'];
          LoadedImage.style.width=aimages[loadall+',wth'];
          LoadedImage.style.width=aimages[loadall+',hgt'];
     }
}
 
function getNextTimeOutNum(cTimeOutType) {
     nRetNum = null;
     eval("n"+cTimeOutType+"TimeOut++");
     nRetNum = eval("n"+cTimeOutType+"TimeOut");
     return nRetNum;
}
 
function clearAllTimeOuts(cTimeOutType) {
     for(key in eval("a"+cTimeOutType+"TimeOuts")) {  
          clearTimeout(eval("a"+cTimeOutType+"TimeOuts[key]"));
     } 
     eval("n"+cTimeOutType+"TimeOut = -1");
     eval("a"+cTimeOutType+"TimeOuts.length = 0")
}
 
function setImage(moveto){
     bnavbtn = 0;
     nogcurview = ncurview;
     cmoveto = moveto+"";
     if ((cmoveto == "N" || cmoveto == "P" || cmoveto == "S") == false) {
          ncurview = moveto;
     }
     else {
          document.getElementById("imgstop").style.display="none";
          clearAllTimeOuts('ssw');
          ncurview = nogcurview + ((cmoveto == "N") ? 1 : (cmoveto == "P") ? -1 : 1);          
     }
     ncurimage = ncurview - 1;
 
     document.getElementById('mainimage').style.width = aimages[ncurimage+',wth'];
     document.getElementById('mainimage').style.height = aimages[ncurimage+',hgt'];
     document.getElementById('mainimage').src = aimages[ncurimage+',src'];
 
     cimgtxt = aimages[ncurimage+',txt']
     if (aimages[ncurimage+',txt'].length == 0) {
          document.getElementById("divimgtxt").style.display="none";
     }
     else {
          document.getElementById("divimgtxt").style.display="";
          document.getElementById("divimgtxt").style.display="block";
          document.getElementById('divimgtxt').innerHTML = aimages[ncurimage+',txt'] + 
               '<hr color="maroon" size="1px" style="position:relative;top:-4px;">';
     }
 
     document.getElementById('spanviewnum').innerHTML = ncurview+' of '+nlastview;
     if (ncurview == 1) {
          document.getElementById("imgback").style.display="none";
     }
     else
     {
          document.getElementById("imgback").style.display="";
          document.getElementById("imgback").style.display="block";
     }
 
     if (ncurview == nlastview) {
          document.getElementById("imgforward").style.display="none";
     }
     else
     {
          document.getElementById("imgforward").style.display="";
          document.getElementById("imgforward").style.display="block";
     }
     return;
}
 
 
function toPoint(id,points){
     bnavbtn = 0;
     nogcurview = ncurview;
     cpoints = points+"";
     if (cpoints == "N" || cpoints == "P" || cpoints == "S") {
          document.getElementById("imgstop").style.display="none";
          clearAllTimeOuts('ssw');
          ncurview = nogcurview + ((cpoints == "N") ? 1 : (cpoints == "P") ? -1 : 0);
          points = (ncurview * nviewincrement) - nviewincrement;
     }
     else {
          ncurview = (points+nviewincrement) / nviewincrement;
     }
 
     document.getElementById(id).scrollTop=points;
 
     document.getElementById('spanviewnum').innerHTML = ncurview+' of '+nlastview;
 
     if (ncurview == 1) {
          document.getElementById("imgback").style.display="none";
     }
     else
     {
          document.getElementById("imgback").style.display="";
          document.getElementById("imgback").style.display="block";
     }
 
     if (ncurview == nlastview) {
          document.getElementById("imgforward").style.display="none";
     }
     else
     {
          document.getElementById("imgforward").style.display="";
          document.getElementById("imgforward").style.display="block";
     }
     return;
}
 
function headerEffect(mlsstart,efftype) {
     elem = document.getElementById("divhdr")
 
     cspace = " "
     txtHdrEasy = "E a s y";
     txtHdrRider = "R i d e r";
     txtHdrCharter = "&nbsp&nbsp&nbsp C h a r t e r";
 
     ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrEasy").innerHTML = ""',mlsstart);
     ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrRider").innerHTML = ""',mlsstart);
 
     if (efftype=="S") {
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('spellString("typeHdrEasy",txtHdrEasy,50)',mlsstart+200); 
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('spellString("typeHdrRider",txtHdrRider,2)',mlsstart+1000);        
     }
     else {
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrEasy").innerHTML = txtHdrCharter',mlsstart);
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrEasy").innerHTML = txtHdrEasy',mlsstart+1000);
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrRider").innerHTML = txtHdrRider',mlsstart+1005);
     }
     return;
}
 
function replaceContent(divname, newcontent) {
     document.getElementById(divname).innerHTML = newcontent 
     return;
}
 
function flashLink(linkname, mlsstart, mlastrun) {
     // #D3D3D3 = light grey
     // #800000 = maroon
     // #0000FF = blue
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#D3D3D3"',mlsstart+300);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart+600);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#D3D3D3"',mlsstart+900);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart+1200);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#D3D3D3"',mlsstart+1500);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart+1800);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#0000FF"',mlsstart+2100);
     return;
}
 
function startSlideShow() {
     document.getElementById("imgstop").style.display="";
     document.getElementById("imgstop").style.display="block";
   
     clearAllTimeOuts('ssw');
     clearAllTimeOuts('hdr');
     clearAllTimeOuts('lnk');
 
     setImage(1);
     headerEffect(0,'M');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(2)',3000);
     headerEffect(3000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(3)',6000);
     headerEffect(6000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(4)',9000);
     headerEffect(9000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(5)',12000);
     headerEffect(12000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(6)',15000);
     headerEffect(15000,'S');
     headerEffect(18000,'M');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('document.getElementById("imgstop").style.display="none"', 15000);
 
     flashLink('arefcontact',21000);
     flashLink('arefcontact',25000);     
     
     return;
}
 
function runIE7Tweaks() {
     document.getElementById('bodybegtxt').style.top = -20;
     document.getElementById('divviewnav').style.top = 164;
     document.getElementById('bodyendtxt').style.top = 492;
}

Open in new window

0
Comment
Question by:danross44
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 1

Expert Comment

by:GaryRasmussen
ID: 21848222
If you don't have the problem locally, perhaps it is because the images have not fully loaded before you move on to the next image.  Maybe you could preload the 6 images into memory while you add them to the array??

pic1= new Image(700,300)
pic1.src="'images/side_view1.jpg"



0
 
LVL 1

Author Comment

by:danross44
ID: 21848445
So I added in the pre-loading of the images, which was a good idea anyway, but this did not fix either problem.... So now my code is (see below)
---- HTML - Main.php ----
 
<html>
<head>
<title>Easy Rider Charter - Main Page</title>
</head>
 
<body style="position:relative;left:10px;">
<script language='JavaScript'>
var aimages = new Array();
var nlastview = 6;
aimages['0,src']='images/side_view1.jpg';
aimages['0,wth']=725;
aimages['0,hgt']=300;
aimages['0,txt']='';
aimages['1,src']='images/cabin_view1.jpg';
aimages['1,wth']=575;
aimages['1,hgt']=300;
aimages['1,txt']='';
aimages['2,src']='images/dining_view1.jpg';
aimages['2,wth']=575;
aimages['2,hgt']=300;
aimages['2,txt']='';
aimages['3,src']='images/aftdeck_view1.jpg';
aimages['3,wth']=575;
aimages['3,hgt']=300;
aimages['3,txt']='';
aimages['4,src']='images/stateroom3_view1.jpg';
aimages['4,wth']=575;
aimages['4,hgt']=300;
aimages['4,txt']='';
aimages['5,src']='images/master_br_view1.jpg';
aimages['5,wth']=585;
aimages['5,hgt']=260;
aimages['5,txt']='The full beam master suite features a king bed, and his and her baths separated by a double shower. The VIP stateroom has a queen berth and the guest stateroom has twin berths. Crew quarters are separate.';
</script>
<script type="text/javascript" src="include/libUtils.js"></script>
<script type="text/javascript" src="include/mainEffects.js"></script>
<script type="text/javascript" src="include/typeText.js"></script>
<script type="text/javascript" src="include/wz_tooltip.js"></script>
 
<div id="divhdr" align="top" style="position:relative;width:725px;left:5px;top:-10px;font-family:impact;font-size:32px;font-weight:bold;font-style:italic;color:maroon;">
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <span id="typeHdrEasy">E a s y</span><span>&nbsp&nbsp&nbsp</span><span id="typeHdrRider">R i d e r</span><span>&nbsp&nbsp</span>
 
</div>
 
<div style="position:relative;top:-17px;">
<hr color="maroon" size="1px">
</div>
 
<div id="divmainlinks" style="position:relative;top:-24px;padding:3px;">
<a href="main.php">Pictures / Main Page</a> &nbsp
<a href="specs.php" style="left:20px;">Yacht Specifications</a> &nbsp
<a href="calendar.php" style="left:30px;">Availability Calendar</a> &nbsp
<a id="arefcontact" href="contact.php" onmouseover="Tip('Contact owner regarding reservations or any questions')"
onmouseout="UnTip()" style="left:40px;">Request Information</a>
 
</div>
 
<div id="bodybegtxt" style="position:relative;top:-36px;width:725px;height:100px;">
<p>
Easy rider is a beautiful 72-foot Horizon motor yacht that is available for chartering year round.
The yacht contains comfortable lounging on the foredeck, al fresco dining and lounging
on the aft deck and fly bridge plus more formal dining inside. A central entertainment system provides music throughout the yacht,
and there are satellite TVs and stereos in each of the 3 double staterooms. There are total accommodations for up to six guests.
</p>
<br>
</div>
 
 
<script type="text/javascript">
preloader();
</script>
 
<div id="divimages" z-index="3" style="position:relative;top:-26px;width:725px;height:300px;font-style:italic;font-size:12px;">
<img id="mainimage" z-index="100" src="" alt="" style="width:725px;height:300px;background:transparent;">
<div id="divimgtxt" style="display:none;width:585px;position:relative;">
</div>
 
</div>
 
<div id="divviewnav" z-index="2" style="position:absolute;top:155px;width:275px;font-size:12px;">
<img id="imgplay" onclick="startSlideShow()" onmouseover="Tip('Play / Restart Slide Show')" onmouseout="UnTip()" alt="Play / Restart Slide Show" src="play_button_maroon.bmp" style="position:absolute;top:-3px;cursor:pointer;cursor:hand;">
<img id="imgstop" onclick="setImage('S')" onmouseover="Tip('Stop Slide Show')" onmouseout="UnTip()" alt="Stop Slide Show" src="stop_button_maroon.bmp" style="position:absolute;left:26px;top:-3px;cursor:pointer;cursor:hand;">
<img id="imgback" onclick="setImage('P')" onmouseover="Tip('Previous Image')" onmouseout="UnTip()" alt="Previous Image" border="0" src="back_arrow_maroon.bmp" style="position:absolute;left:64px;cursor:pointer;cursor:hand;">
<span id="spanviewnum" style="position:absolute;left:84px;color:black;font-weight:bold;">1 of 4</span>
<img id="imgforward" onclick="setImage('N')" onmouseover="Tip('Next Image')" onmouseout="UnTip()" alt="Next Image" border="0" src="forward_arrow_maroon.bmp" style="position:absolute;left:117px;cursor:pointer;cursor:hand;">
</div>
 
<div id="bodyendtxt" style="position:absolute;top:480px;width:725px">
The boat is currently located at Ventura Harbor Marina situated front and center,
and can also be chartered or returned to an approved list of alternative
Southern California origination/destination points for additional charges.
Click "Request Information" link at top of the page to inquire about
charter reservations or any questions regarding Easy Rider.
</div>
 
<div style="position:relative;top:66px;font-size:10px;width:725;text-align:right;">
Site Design by 44 Drive, Inc. (contact at 4444dr@gmail.com)
 
</div>
 
 
<script type="text/javascript">
if ((navigator.appVersion.indexOf('MSIE 7.')==-1) ? false : true) {
     runIE7Tweaks();
}
startSlideShow();
</script>
 
</body>
</html>
 
---- Javascript - mainEffects.js ----
 
var ncurview = 1;
var nviewincrement = 300;
var nviewdelaysecs = 3;
 
var ahdrTimeOuts= new Array();
var asswTimeOuts= new Array();
var alnkTimeOuts= new Array();
 
var nhdrTimeOut = -1;
var nsswTimeOut = -1;
var nlnkTimeOut = -1;
 
function preloader() {
     for(loadall=0; loadall<nlastview; loadall++) {
          var LoadedImage=new Image();
          LoadedImage.src=aimages[loadall+',src'];
          LoadedImage.style.width=aimages[loadall+',wth'];
          LoadedImage.style.height=aimages[loadall+',hgt'];
     }
}
 
function getNextTimeOutNum(cTimeOutType) {
     nRetNum = null;
     eval("n"+cTimeOutType+"TimeOut++");
     nRetNum = eval("n"+cTimeOutType+"TimeOut");
     return nRetNum;
}
 
function clearAllTimeOuts(cTimeOutType) {
     for(key in eval("a"+cTimeOutType+"TimeOuts")) {  
          clearTimeout(eval("a"+cTimeOutType+"TimeOuts[key]"));
     } 
     eval("n"+cTimeOutType+"TimeOut = -1");
     eval("a"+cTimeOutType+"TimeOuts.length = 0")
}
 
function scrollWindow() {
     window.scrollTo(100,500)
}	
 
function toTop(id){
     document.getElementById(id).scrollTop=0
}
 
defaultStep=1
step=defaultStep
function scrollDivDown(id){
document.getElementById(id).scrollTop+=step
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}
 
function scrollDivUp(id){
document.getElementById(id).scrollTop-=step
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
 
function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}
 
function setImage(moveto){
     bnavbtn = 0;
     nogcurview = ncurview;
     cmoveto = moveto+"";
     if ((cmoveto == "N" || cmoveto == "P" || cmoveto == "S") == false) {
          ncurview = moveto;
     }
     else {
          document.getElementById("imgstop").style.display="none";
          clearAllTimeOuts('ssw');
          ncurview = nogcurview + ((cmoveto == "N") ? 1 : (cmoveto == "P") ? -1 : 1);          
     }
     ncurimage = ncurview - 1;
 
     document.getElementById('mainimage').style.width = aimages[ncurimage+',wth'];
     document.getElementById('mainimage').style.height = aimages[ncurimage+',hgt'];
     document.getElementById('mainimage').src = aimages[ncurimage+',src'];
 
     cimgtxt = aimages[ncurimage+',txt']
     if (aimages[ncurimage+',txt'].length == 0) {
          document.getElementById("divimgtxt").style.display="none";
     }
     else {
          document.getElementById("divimgtxt").style.display="";
          document.getElementById("divimgtxt").style.display="block";
          document.getElementById('divimgtxt').innerHTML = aimages[ncurimage+',txt'] + 
               '<hr color="maroon" size="1px" style="position:relative;top:-4px;">';
     }
 
     document.getElementById('spanviewnum').innerHTML = ncurview+' of '+nlastview;
     if (ncurview == 1) {
          document.getElementById("imgback").style.display="none";
     }
     else
     {
          document.getElementById("imgback").style.display="";
          document.getElementById("imgback").style.display="block";
     }
 
     if (ncurview == nlastview) {
          document.getElementById("imgforward").style.display="none";
     }
     else
     {
          document.getElementById("imgforward").style.display="";
          document.getElementById("imgforward").style.display="block";
     }
     return;
}
 
 
function toPoint(id,points){
     bnavbtn = 0;
     nogcurview = ncurview;
     cpoints = points+"";
     if (cpoints == "N" || cpoints == "P" || cpoints == "S") {
          document.getElementById("imgstop").style.display="none";
          clearAllTimeOuts('ssw');
          ncurview = nogcurview + ((cpoints == "N") ? 1 : (cpoints == "P") ? -1 : 0);
          points = (ncurview * nviewincrement) - nviewincrement;
     }
     else {
          ncurview = (points+nviewincrement) / nviewincrement;
     }
 
     document.getElementById(id).scrollTop=points;
 
     document.getElementById('spanviewnum').innerHTML = ncurview+' of '+nlastview;
 
     if (ncurview == 1) {
          document.getElementById("imgback").style.display="none";
     }
     else
     {
          document.getElementById("imgback").style.display="";
          document.getElementById("imgback").style.display="block";
     }
 
     if (ncurview == nlastview) {
          document.getElementById("imgforward").style.display="none";
     }
     else
     {
          document.getElementById("imgforward").style.display="";
          document.getElementById("imgforward").style.display="block";
     }
     return;
}
 
function headerEffect(mlsstart,efftype) {
     elem = document.getElementById("divhdr")
 
     cspace = " "
     txtHdrEasy = "E a s y";
     txtHdrRider = "R i d e r";
     txtHdrCharter = "&nbsp&nbsp&nbsp C h a r t e r";
 
     ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrEasy").innerHTML = ""',mlsstart);
     ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrRider").innerHTML = ""',mlsstart);
 
     if (efftype=="S") {
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('spellString("typeHdrEasy",txtHdrEasy,50)',mlsstart+200); 
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('spellString("typeHdrRider",txtHdrRider,2)',mlsstart+1000);        
     }
     else {
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrEasy").innerHTML = txtHdrCharter',mlsstart);
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrEasy").innerHTML = txtHdrEasy',mlsstart+1000);
          ahdrTimeOuts[getNextTimeOutNum('hdr')] = setTimeout('document.getElementById("typeHdrRider").innerHTML = txtHdrRider',mlsstart+1005);
     }
     return;
}
 
function replaceContent(divname, newcontent) {
     document.getElementById(divname).innerHTML = newcontent 
     return;
}
 
function flashLink(linkname, mlsstart, mlastrun) {
     // #D3D3D3 = light grey
     // #800000 = maroon
     // #0000FF = blue
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#D3D3D3"',mlsstart+300);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart+600);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#D3D3D3"',mlsstart+900);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart+1200);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#D3D3D3"',mlsstart+1500);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#800000"',mlsstart+1800);
     alnkTimeOuts[getNextTimeOutNum('lnk')] = setTimeout('document.getElementById("'+linkname+'").style.color = "#0000FF"',mlsstart+2100);
     return;
}
 
function startSlideShow() {
     document.getElementById("imgstop").style.display="";
     document.getElementById("imgstop").style.display="block";
   
     clearAllTimeOuts('ssw');
     clearAllTimeOuts('hdr');
     clearAllTimeOuts('lnk');
 
     setImage(1);
     headerEffect(0,'M');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(2)',3000);
     headerEffect(3000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(3)',6000);
     headerEffect(6000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(4)',9000);
     headerEffect(9000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(5)',12000);
     headerEffect(12000,'S');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('setImage(6)',15000);
     headerEffect(15000,'S');
     headerEffect(18000,'M');
 
     asswTimeOuts[getNextTimeOutNum('ssw')] = setTimeout('document.getElementById("imgstop").style.display="none"', 15000);
 
     flashLink('arefcontact',21000);
     flashLink('arefcontact',25000);     
     
     return;
}
 
function runIE7Tweaks() {
     document.getElementById('bodybegtxt').style.top = -20;
     document.getElementById('divviewnav').style.top = 164;
     document.getElementById('bodyendtxt').style.top = 492;
}

Open in new window

0
 
LVL 1

Expert Comment

by:GaryRasmussen
ID: 21848531
I must be missing something but I do not see where you are preloading the images.  The code looks the way it did before?
0
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 
LVL 1

Author Comment

by:danross44
ID: 21848604
See line 72 of the code snippet...
0
 
LVL 1

Accepted Solution

by:
GaryRasmussen earned 1500 total points
ID: 21848731
ok, sorry :0

When I run your page, I have no problem with images 2 and 3.  I do however not see the last image as you said.  Your code says that this last image is located at http://www.easyridercharter.com/images/master_br_view1.jpg but if you paste http://www.easyridercharter.com/images/master_br_view1.jpg into your browser, the image cannot be found which means that it is not there.  Chainge the path for that image and you should be fine.
0
 
LVL 1

Author Comment

by:danross44
ID: 21850693
The file was there in actuality. It was strange though that the server was unable to access it, because it showed up my my admin section and also when listing files on the ftp server.

Anyway, I finally found the cause. It was 2-fold:

1) originally uploaded the images using windows clear ftp (ftp.exe provided by default with windows) - for some reason transferring certain image files using clear ftp from my windows machine to the linux web server was causing them to become a bit jumbled. I deleted all the images from my images folder on the server and re-uploaded them using my admin area from within ISPConfig and that fixed the couple of images that were jumbled.

2) The one image that was not showing up at all, happened to be an image that I had srunken using the microsoft paint brush "stretch/skew" to minimize the size by like 45%.  Well I just happened to try going back to using the original, un-pbrush shrunken version of the image, and wholla, image 6 no show problem is fixed

Thank you Gary, for your comments and your efforts to assist me...
0
 
LVL 1

Author Closing Comment

by:danross44
ID: 31469845
See my last comment to see how I arrived at and implemented my 2-fold solution...
0

Featured Post

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question