Slideshow Javascript Troubleshooting

JavaScript
1

I have implemented a script that successfully changes the image and is capable of changing the anchor tag, alt tag and title tag but I cannot get it to work successfully. Can anyone tell me why?

Here is the script:


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

var t;
var arrIndex = 1;
var changeImg = true;

//change the opacity for different browsers
function changeOpac(opacity, id) 
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function switchImage()
{	
	var speed = Math.round(millisec / 1000);
    var timer = 0;
	if(changeImg)
	{
		document.getElementById('slideshow-img').src = Pic[arrIndex];
		document.getElementById('slideshow-img').alt = Alt[arrIndex];		
		document.getElementById('slideshow-link').href = Url[arrIndex];		
		document.getElementById('slideshow-link').title = Alt[arrIndex];		
		changeImg = false;
		for(i = 0; i <= 100; i++)
		{
			setTimeout("changeOpac(" + i + ",'" + "slideshow-img" + "')",(timer * speed));
			timer++;
		}
	}
	else
	{
		document.getElementById('slideshow-div').style.backgroundImage = "url(" + Pic[arrIndex] + ")";
		document.getElementById('slideshow-img').alt = Alt[arrIndex];		
		document.getElementById('slideshow-link').href = Url[arrIndex];		
		document.getElementById('slideshow-link').title = Alt[arrIndex];		
		changeImg = true;
		for(i = 100; i >= 0; i--) 
		{
			setTimeout("changeOpac(" + i + ",'" + "slideshow-img" + "')",(timer * speed));
			timer++;
		}
	}
	arrIndex++;
	if(arrIndex == Pic.length) arrIndex = 0;
	t = setTimeout("switchImage()", (millisec*2));
}

function runslideshow()
{
	
	//Initialize slideshow with both images matching
	document.getElementById('slideshow-div').style.backgroundImage = "url(" + Pic[0] + ")";
	document.getElementById('slideshow-img').src = Pic[0];
	document.getElementById('slideshow-img').alt = Alt[0];		
	document.getElementById('slideshow-link').href = Url[0];		
	document.getElementById('slideshow-link').title = Alt[0];		
	
	setTimeout("switchImage()", millisec);
}

And here is the settings file:


var Pic = new Array();

Pic[0] = 'i/gfx_weekly-specials1.png';
Pic[1] = 'i/gfx_weekly-specials2.png';

var Alt = new Array();

Alt[0] = 'Weekly Specials 123';
Alt[1] = 'Weekly Specials 456';

var Url = new Array();

Url[0] = 'specials/';
Url[1] = 'new-specials/';

var millisec = 4000;

And here it is within the HTML document:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Car Dealer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" language="javascript" src="j/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" language="javascript" src="j/fader-settings.js"></script>
<script type="text/javascript" language="javascript" src="j/global.js"></script>
<link type="text/css" rel="stylesheet" href="c/style.css" />
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="c/ie.css">
<![endif]-->
<!--[if lt IE 7.]>
<script defer type="text/javascript" language="javascript" src="j/pngfix.js"></script>
<![endif]-->
</head>
<body onLoad="runslideshow();">
<div id="wrapper">

.......................

    <div id="slideshow-div">
    	<a href="specials/" id="slideshow-link" name="slideshow-link" title="Weekly Specials"><img src="i/gfx_weekly-specials_bkg.png" id="slideshow-img" name="slideshow-img" width="305" height="273" alt="Weekly Specials" class="imageTrans" border="0" /></a>
    </div><!--end slideshow-div-->
    
......................

And here is a link to the page in question:
LINK-
http://www.securehostserver.info/rvf/

Thanks in advance!
Todd

2

Awesome! I really appreciate you finding these errors! You are a life saver!

3 

//Line 39 in global.js:
document.getElementById('SlideShowImg').alt = Alt[arrIndex];
//should read
document.getElementById('slideshow-img').alt = Alt[arrIndex];		

//You have similar errors in the two lines that follow:
document.getElementById('SlideShowLink').href = Url[arrIndex];		
document.getElementById('SlideShowLink').title = Alt[arrIndex];

//Should be:
document.getElementById('slideshow-link').href = Url[arrIndex];		
document.getElementById('slideshow-link').title = Alt[arrIndex];