Hello,

I normally don't use alot of javascripts on my sites. I prefer php, but I am in need of a slideshow and it seemed like it was the way to go, since I rarely use javascripts, I most often grab a freebie when I need one and that last time that happened was a few years ago.

anyhow, I need a slideshow that has a drop down box, play, stop, previous, next, zoom in and zoom out functions. I found one from perlscriptsjavascripts.com that works perfectly for that but I also need it so that when you click on the image it takes you to a new page. that's where i"m stuck.

I have been searching for a couple of days for an answer and I"ve tried several different methods and nothing works. What should logically work is just not responding.


Here's the code:

Code:
<head>
<script>
<!--
/* 
SlideShow. Written by PerlScriptsJavaScripts.com
Copyright http://www.perlscriptsjavascripts.com 
Free and commercial Perl and JavaScripts     
*/

// transition effect. number between 0 and 23, 23 is random effect
effect = 23; 

// transition duration. number of seconds effect lasts
duration = 1.5; 

// seconds to diaply each image?
display = 5;

// width of stage (first image)
oW = 150;

// height of stage
oH = 93;

// zoom width by (add or subtracts this many pixels from image width)
zW = 40;

// zoom height by 
zH = 30;

// path to image/name of image in slide show. this will also preload all images
// each element in the array must be in sequential order starting with zero (0)
SLIDES = new Array();

SLIDES[0]  = ["http://www.allcotrailers.com/images/js/04b.jpg", "Featured Equipment"];
SLIDES[1]  = ["http://www.allcotrailers.com/images/various4.jpg", "Bottom Dumps"];
SLIDES[2]  = ["http://www.allcotrailers.com/images/various1.jpg", "Lightweight Bottom Dumps"];
SLIDES[3]  = ["http://www.allcotrailers.com/images/various2.jpg", "Transfers"];
SLIDES[4]  = ["http://www.allcotrailers.com/images/t10.gif", "10 Wheel Dumps"];
SLIDES[5]  = ["http://www.allcotrailers.com/images/various3.jpg", "End Dump"];


// end required modifications

S = new Array();
for(a = 0; a < SLIDES.length; a++){
	S[a] = new Image(); S[a].src  = SLIDES[a][0];
}
// -->
</script>
<style>
<!--
input { width: 80px; font-size: 10px; }
// -->
</style>
</head>

<body>
<table align="center"  border="0" cellpadding="3" cellspacing="0"  width="250">
<form name="_slideShow">
<input type="Hidden" name="currSlide" value="0">
<input type="Hidden"name="delay">
<tr>
<td>
<table style="border: white outset 2px;"  cellpadding="0" cellspacing="0"  width="100%"><tr><td align="center">

<a href="javascript:;" onclick="startSS()"><img src="http://www.allcotrailers.com/images/js/toolplay.gif"  alt="" border="0"></a>
<a href="javascript:;" onclick="stopSS()"><img src="http://www.allcotrailers.com/images/js/toolstop.gif"  alt="" border="0"></a>
<img src="http://www.allcotrailers.com/images/js/toolsep.gif"  alt="" border="0">
<a href="javascript:;" onclick="prevSS()"><img src="http://www.allcotrailers.com/images/js/toolprev.gif"  alt="" border="0"></a>
<a href="javascript:;" onclick="nextSS()"><img src="http://www.allcotrailers.com/images/js/toolnext.gif"  alt="" border="0"></a>
<img src="http://www.allcotrailers.com/images/js/toolsep.gif"  alt="" border="0">
<a href="javascript:;" onclick="zoom(zW, zH)"><img src="http://www.allcotrailers.com/images/js/toolin.gif"  alt="" border="0"></a>
<a href="javascript:;" onclick="zoom(-zW, -zH)"><img src="http://www.allcotrailers.com/images/js/toolout.gif"  alt="" border="0"></a>
<img src="http://www.allcotrailers.com/images/js/toolsep.gif"  alt="" border="0">
<a href="javascript:;" onclick="zoom('')"><img src="http://www.allcotrailers.com/images/js/toolreset.gif"  alt="" border="0"></a>
<select name="wichIm" style="width: 100%; font-size: 10px;" onchange="selected(this.options[this.selectedIndex].value)">
</select>
</td></tr></table>
</td>
</tr>
<tr>
<td align="center">
<table  width="250" height="133"  cellpadding="0" cellspacing="0" style="border: white inset 2px;"><tr><td align="center"><img name="stage" border="0" src="http://www.allcotrailers.com/images/js/04b.jpg" style="filter: revealtrans(); font-size:12;"></td></tr></table>
<BR><BR><BR>
</td>
</tr>
</form>
</table>

<script>
<!--

f = document._slideShow;
n = 0;
t = 0;

document.images["stage"].width  = oW;
document.images["stage"].height = oH;
f.delay.value = display;

// add image numbers to select menu
f.wichIm.options.length = 0;
for(i in SLIDES){
	f.wichIm.options[i] = new Option(SLIDES[i][1],i);
}

function startSS(){
	t = setTimeout("runSS(" + f.currSlide.value + ")", 1 * 1);
}

function runSS(n){
	n++;
	if(n >= SLIDES.length){
		n = 0;
	}
	document.images["stage"].src = S[n].src;
	if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
		document.images["stage"].style.visibility = "hidden";
		document.images["stage"].filters.item(0).apply();
		document.images["stage"].filters.item(0).transition = effect;
		document.images["stage"].style.visibility = "visible";
		document.images["stage"].filters(0).play(duration);
	}
	f.currSlide.value = n;
	f.wichIm[n].selected = true;
	t = setTimeout("runSS(" + f.currSlide.value + ")", f.delay.value * 1000);
}

function stopSS(){
	if(t){
		t = clearTimeout(t);
	}
}

function nextSS(){
	stopSS();
	n = f.currSlide.value;
	n++;
	if(n >= SLIDES.length){
		n = 0;
	}
	if(n < 0){
		n = SLIDES.length - 1;
	}
	document.images["stage"].src = S[n].src;
	f.currSlide.value = n;
	f.wichIm[n].selected = true;
	if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
		document.images["stage"].style.visibility = "hidden";
		document.images["stage"].filters.item(0).apply();
		document.images["stage"].filters.item(0).transition = effect;
		document.images["stage"].style.visibility = "visible";
		document.images["stage"].filters(0).play(duration);
	}
}

function prevSS(){
	stopSS();
	n = f.currSlide.value;
	n--;
	if(n >= SLIDES.length){
		n = 0;
	}
	if(n < 0){
		n = SLIDES.length - 1;
	}
	document.images["stage"].src = S[n].src;
	f.currSlide.value = n;
	f.wichIm[n].selected = true;
	
	if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
		document.images["stage"].style.visibility = "hidden";
		document.images["stage"].filters.item(0).apply();
		document.images["stage"].filters.item(0).transition = effect;
		document.images["stage"].style.visibility = "visible";
		document.images["stage"].filters(0).play(duration);
	}
}

function selected(n){
	stopSS();
	document.images["stage"].src = S[n].src;
	f.currSlide.value = n;
	
	if(document.all && navigator.userAgent.indexOf("Opera") < 0 && navigator.userAgent.indexOf("Windows") >= 0){
		document.images["stage"].style.visibility = "hidden";
		document.images["stage"].filters.item(0).apply();
		document.images["stage"].filters.item(0).transition = effect;
		document.images["stage"].style.visibility = "visible";
		document.images["stage"].filters(0).play(duration);
	}
}

function zoom(dim1, dim2){
	if(dim1){
		if(document.images["stage"].width < oW){
			document.images["stage"].width   = oW;
			document.images["stage"].height  = oH;
		} else {
			document.images["stage"].width  += dim1;
			document.images["stage"].height += dim2;
		}
		if(dim1 < 0){
			if(document.images["stage"].width < oW){
				document.images["stage"].width   = oW;
				document.images["stage"].height  = oH;
			}
		}
	} else {
		document.images["stage"].width   = oW;
		document.images["stage"].height  = oH;
	}
}
// -->
</script>
</body>
If I add the URL to where i want it to go like this,

Code:
SLIDES[1]  = ["http://www.allcotrailers.com/images/various4.jpg", "http://www.allcotrailers.com/trailers.bd40.html", "Bottom Dumps"];
it stops the drop down menu from working and instead it becomes blank. I"m wondering if I need to add a function or array to the script but I"m not totally sure how I would go about doing that, where I would add it or if I even need to do that.

Can someone clue me into what I"m missing here and what I need to do?

here's the url where you can see the slideshow in action as it's already running nicely aside from being clickable.

http://www.allcotrailers.com

p.s. I"m just starting this site so there ain't nothing there yet except the basic layout and the drop down box.

thanks in advance.