please help me with a drop-in image slideshow

[I](i posted this on the dhtml thread, but posting over here, too in case anyone can help)[/I]

Pardon me if this particular issue has been addressed before, but I am having a problem with some code.

I am using the “Drop-in Image Slideshow” code from dynamicdrive.com
(See original code here: [url]http://www.dynamicdrive.com/dynamicindex14/dropitslide2.htm[/url] )

I copy & pasted it into my page (in a table cell) and it looks great. I click on one of the images & it takes me to the page that I linked it to. All great… up until that point.

It is when i hit the back button on my browser to return to the homepage when all heck lets loose. The slideshow starts to wig out on me and eventually crashes my browser (and even my system one time).

I am on a Mac OS 9.2 testing in IE 5.
I also tested this in OSX and it did the same thing.

THEN I tested on a PC, and the slideshow did not appear at all. It was just white space where my image should have been.

Now I am new to DHTML in general, so I don’t know how to go about fixing this. Is there extra code that I should be adding to my document to make it work? Or is this code just buggy? Or does anybody else have any tried & true code for this type of activity that I could use?

What should I do? My client really wants this drop-in slideshow image rotator.

TIA,
Estella

Here is what my code looks like. I just changed the variables that it told me to (height & width, images & links). I placed it in my default.asp (my homepage) inside of a table cell.

[code=php]

<script language=”JavaScript1.2″>

//Drop-in slideshow II (hyperlinked)- By Dynamic Drive
//For full source code and more DHTML scripts, visit [url]http://www.dynamicdrive.com[/url]
//This credit MUST stay intact for use

var slideshow_width=’460px’ //SET SLIDESHOW WIDTH (set to largest image’s width if multiple dimensions exist)
var slideshow_height=’260px’ //SET SLIDESHOW HEIGHT (set to largest image’s height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed

dropimages[0]=”images/rotate0.jpg”
dropimages[1]=”images/rotate1.jpg”
dropimages[2]=”images/rotate2.jpg”
dropimages[3]=”images/rotate3.jpg”
dropimages[4]=”images/rotate4.jpg”

var droplinks=new Array()
//SET IMAGE URLs. Extend or contract array as needed
droplinks[0]=”/self_adhesive_calendars.asp”
droplinks[1]=”/desk_calendars.asp”
droplinks[2]=”/wall_calendars.asp”
droplinks[3]=”/greeting_cards.asp”
droplinks[4]=”/photo_cards_frames.asp”

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[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:-‘+slideshow_height+'”></div><div id=”canvas1″ style=”position:absolute;width:’+slideshow_width+’;height:’+slideshow_height+’;top:-‘+slideshow_height+'”></div></div>’)
else
document.write(‘<a href=”javascript:rotatelink()”><img name=”defaultslide” src=”‘+dropimages[0]+'” border=0></a>’)

var curpos=parseInt(slideshow_height)*(-1)
var degree=10
var curcanvas=”canvas0″
var curimageindex=0
var nextimageindex=1

function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos+”px”
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas==”canvas0″)? “canvas0” : “canvas1”
tempobj=ie4? eval(“document.all.”+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<a href=”‘+droplinks[curimageindex]+'”><img src=”‘+dropimages[curimageindex]+'” border=0></a>’
nextimageindex=(nextimageindex<dropimages.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(“movepic()”,50)’
dropslide=eval(temp)
curcanvas=(curcanvas==”canvas0″)? “canvas1” : “canvas0”
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_height)*(-1)
var crossobj=ie4? eval(“document.all.”+what) : document.getElementById(what)
crossobj.style.top=curpos+”px”
}

function startit(){
var crossobj=ie4? eval(“document.all.”+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href=”‘+droplinks[curimageindex]+'”><img src=”‘+dropimages[curimageindex]+'” border=0></a>’
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval(“rotateimage()”,pause)

</script>

[/code]

Also in #JavaScript _↴