fade in slideshow...netscape vs. Mozilla...

[rmedek]

Hello all,

Well, I have this Dynamic Drive fade in slideshow script as an alternative to Flash on my homepage. For a long time it seemed to work just fine on everything except Opera...

Recently I downloaded Mozilla 1.6 for my mac, and boom... no working slideshow. It only displays the second pic of three, with no fade, and no other images, although it does seem to cycle. The funny thing is the script works fine in Netscape.

Any ideas? I'm a complete idiot when it comes to javascript, so any help is greatly appreciated... here's the code:

<!-- start 

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]

var slideshow_width='700px' 
var slideshow_height='150px' 
var pause=8000 

var fadeimages=new Array()
fadeimages[0]="imgs/slide1.jpg"
fadeimages[1]="imgs/slide2.jpg"
fadeimages[2]="imgs/slide3.jpg"


var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=2
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=(curpos*.01)-.01;
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
startit()
else
setInterval("rotateimage()",pause)

// -->

And here's the link:
richardmedek.com

Thanks,

-Rich

<edit>
Also just checked this script on Safari (does the same thing...) and Camino, Moz's OS X browser. In Camino, it works.
</edit>