how to link slideshow images on js

gilgalbiblewhee · #1 (**permalink**) 01-24-2007, 09:48 PM

I found and worked on a script which makes a slideshow out of my pictures. But I would like to add the proper links to every picture. Here's what I have:

Code:

<html>
<head>
	<title>Greg's Auctions</title>
<script language="JavaScript">
<!-- 
var interval = 1500; 
var random_display = 0;
var image_dir = ""
var ImageNum = 0;
imageArray = new Array();

imageArray[ImageNum++] = new imageItem(image_dir + "http://i.domaindlx.com/wheelofgod/transformers/constructicons.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "http://i.domaindlx.com/wheelofgod/transformers/decepticonbeasts.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "http://i.domaindlx.com/wheelofgod/transformers/decepticontargetmasters.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "http://i.domaindlx.com/wheelofgod/transformers/optimusrodimustrailers.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "http://i.domaindlx.com/wheelofgod/transformers/ultramagnus.jpg");

var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}


//   -->
</script>
</head>
<body bgcolor="#ffffff" onLoad="rotateImage('rImage')">
<center>
<table border=0 cellpadding=4 cellspacing=0>
<tr>
	<td class="td" align=center><font face="verdana, helvetica" size=1><b>Take a look at my other auctions</b>
	<p><a href="#" onClick="rotateImage('rImage')">> play slideshow</a>&nbsp;&nbsp;<a href="#" onClick="clearTimeout(timerID)">|| pause slideshow</a><br>

	<a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><< previous</a>&nbsp;&nbsp;<a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)">next >></a><br></font></td>
</tr>
<tr>
	<td class="td" align=center><img name="rImage" src="27.jpg" width=500 height=375 border=1>
	<p><a href="http://i.domaindlx.com/wheelofgod"><font face="verdana, helvetica" size=1>http://i.domaindlx.com/wheelofgod</font></a></td>
</tr>
</table>
</center>
</body>

</html>