captainsportster
September 22nd, 2005, 04:56 AM
I have a Preload text/javascript in the Head TAG and ONLOAD="preloadImages(); in the Background TAG plus html code in the Body TAG for a rollover navigation bar which was created in Imageready.
The rollover navigation bar works fine on all pages except for a page on which there is also a script in JavaScript1.2 for an image slideshow. The script for the slideshow does not appear to have any "preload" statements in it. There was no Preload placed in the Head or Background TAGs for the slideshow.
But, the two scripts are evidentally conflicting, due to the fact that the navigation bar rollover effects do not work on that page only. The rollover nav bar works fine on all other pages.
Any suggestions or solutions would be appreciated. I have pasted all of the scripts, etc below.
Here is the preload script which is int the <head> </head> tags.
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.jpg");
home_down = newImage("images/home-down.jpg");
counselor_over = newImage("images/counselor-over.jpg");
counselor_down = newImage("images/counselor-down.jpg");
request_over = newImage("images/request-over.jpg");
request_down = newImage("images/request-down.jpg");
monthly_over = newImage("images/monthly-over.jpg");
monthly_down = newImage("images/monthly-down.jpg");
last_minute_over = newImage("images/last_minute-over.jpg");
last_minute_down = newImage("images/last_minute-down.jpg");
bridal_over = newImage("images/bridal-over.jpg");
bridal_down = newImage("images/bridal-down.jpg");
extras_htm_over = newImage("images/extras.htm-over.jpg");
extras_htm_down = newImage("images/extras.htm-down.jpg");
xmas_over = newImage("images/xmas-over.jpg");
xmas_down = newImage("images/xmas-down.jpg");
privacy_over = newImage("images/privacy-over.jpg");
privacy_down = newImage("images/privacy-down.jpg");
preloadFlag = true;
}
}
// -->
</SCRIPT>
Here is the ONLOAD which is in the <body backgroung< <'body background tag.
ONLOAD="preloadImages();"
Here is the html which is within the <body> </body> tags.
TABLE WIDTH=154 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="destxdix.htm"
ONMOUSEOVER="changeImages('home', 'images/home-over.jpg'); return true;"
ONMOUSEOUT="changeImages('home', 'images/home.jpg'); return true;"
ONMOUSEDOWN="changeImages('home', 'images/home-down.jpg'); return true;"
ONMOUSEUP="changeImages('home', 'images/home-over.jpg'); return true;">
<IMG NAME="home" SRC="images/home.jpg" WIDTH=154 HEIGHT=40 BORDER=0 ALT=""></A></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=9 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="about.htm"
ONMOUSEOVER="changeImages('counselor', 'images/counselor-over.jpg'); return true;"
ONMOUSEOUT="changeImages('counselor', 'images/counselor.jpg'); return true;"
ONMOUSEDOWN="changeImages('counselor', 'images/counselor-down.jpg'); return true;"
ONMOUSEUP="changeImages('counselor', 'images/counselor-over.jpg'); return true;">
<IMG NAME="counselor" SRC="images/counselor.jpg" WIDTH=154 HEIGHT=41 BORDER=0 ALT=""></A></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=9 ALT=""></TD>
</TR>
</TABLE>
Here is the script for the image slideshow, which is in a different table cell than the navigation bar.
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='250px'
var scrollerheight='250px'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<img src="images/xmas1_web.jpg">'
slideimages[1]='<img src="images/xmas4_web.jpg">'
slideimages[2]='<img src="images/xmas3_web.jpg">'
slideimages[3]='<img src="images/xmas7_web.jpg">'
slideimages[4]='<img src="images/xmas5_web.jpg">'
slideimages[5]='<img src="images/xmas6_web.jpg">'
slideimages[6]='<img src="images/xmas2_web.jpg">'
slideimages[7]='<img src="images/xmas8_web.jpg">'
//extend this list
///////Do not edit pass this line///////////////////////
var ie=document.all
var dom=document.getElementById
if (slideimages.length>2)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
</td>
</tr>
</table>
</div>
The rollover navigation bar works fine on all pages except for a page on which there is also a script in JavaScript1.2 for an image slideshow. The script for the slideshow does not appear to have any "preload" statements in it. There was no Preload placed in the Head or Background TAGs for the slideshow.
But, the two scripts are evidentally conflicting, due to the fact that the navigation bar rollover effects do not work on that page only. The rollover nav bar works fine on all other pages.
Any suggestions or solutions would be appreciated. I have pasted all of the scripts, etc below.
Here is the preload script which is int the <head> </head> tags.
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.jpg");
home_down = newImage("images/home-down.jpg");
counselor_over = newImage("images/counselor-over.jpg");
counselor_down = newImage("images/counselor-down.jpg");
request_over = newImage("images/request-over.jpg");
request_down = newImage("images/request-down.jpg");
monthly_over = newImage("images/monthly-over.jpg");
monthly_down = newImage("images/monthly-down.jpg");
last_minute_over = newImage("images/last_minute-over.jpg");
last_minute_down = newImage("images/last_minute-down.jpg");
bridal_over = newImage("images/bridal-over.jpg");
bridal_down = newImage("images/bridal-down.jpg");
extras_htm_over = newImage("images/extras.htm-over.jpg");
extras_htm_down = newImage("images/extras.htm-down.jpg");
xmas_over = newImage("images/xmas-over.jpg");
xmas_down = newImage("images/xmas-down.jpg");
privacy_over = newImage("images/privacy-over.jpg");
privacy_down = newImage("images/privacy-down.jpg");
preloadFlag = true;
}
}
// -->
</SCRIPT>
Here is the ONLOAD which is in the <body backgroung< <'body background tag.
ONLOAD="preloadImages();"
Here is the html which is within the <body> </body> tags.
TABLE WIDTH=154 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="destxdix.htm"
ONMOUSEOVER="changeImages('home', 'images/home-over.jpg'); return true;"
ONMOUSEOUT="changeImages('home', 'images/home.jpg'); return true;"
ONMOUSEDOWN="changeImages('home', 'images/home-down.jpg'); return true;"
ONMOUSEUP="changeImages('home', 'images/home-over.jpg'); return true;">
<IMG NAME="home" SRC="images/home.jpg" WIDTH=154 HEIGHT=40 BORDER=0 ALT=""></A></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=9 ALT=""></TD>
</TR>
<TR>
<TD>
<A HREF="about.htm"
ONMOUSEOVER="changeImages('counselor', 'images/counselor-over.jpg'); return true;"
ONMOUSEOUT="changeImages('counselor', 'images/counselor.jpg'); return true;"
ONMOUSEDOWN="changeImages('counselor', 'images/counselor-down.jpg'); return true;"
ONMOUSEUP="changeImages('counselor', 'images/counselor-over.jpg'); return true;">
<IMG NAME="counselor" SRC="images/counselor.jpg" WIDTH=154 HEIGHT=41 BORDER=0 ALT=""></A></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=154 HEIGHT=9 ALT=""></TD>
</TR>
</TABLE>
Here is the script for the image slideshow, which is in a different table cell than the navigation bar.
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='250px'
var scrollerheight='250px'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<img src="images/xmas1_web.jpg">'
slideimages[1]='<img src="images/xmas4_web.jpg">'
slideimages[2]='<img src="images/xmas3_web.jpg">'
slideimages[3]='<img src="images/xmas7_web.jpg">'
slideimages[4]='<img src="images/xmas5_web.jpg">'
slideimages[5]='<img src="images/xmas6_web.jpg">'
slideimages[6]='<img src="images/xmas2_web.jpg">'
slideimages[7]='<img src="images/xmas8_web.jpg">'
//extend this list
///////Do not edit pass this line///////////////////////
var ie=document.all
var dom=document.getElementById
if (slideimages.length>2)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
</td>
</tr>
</table>
</div>