CJones
Final Approach
OK.. I have been banging my head against the wall all stinking day trying to get this to work. It is a simple image banner rotator that allows clicking on the image to redirect to another page. Sounds simple, right!? Well, I have multiple pages I need to do this on, and the images/links for each page need to be separate. So I decided to put it in a .js file which is included in the page header, and then call the function within the .js file on each page while passing a 'Location' variable dependent on which page it is being called from. For some reason, it doesn't actually rotate the images. By the way, I have this image rotator logic working elsewhere on the site by manually entering the pic filename, link location, etc., but when I tried to adjust everything so that it will read the data from an XML file, I can't get it to work. I am confident that the information is being read from the XML file, but I think it is choking when trying to do the 'getElementById' inside the 'cycle1' function.
Does anything stand out as obvious to anyone!?
Does anything stand out as obvious to anyone!?
Code:
function imageRotator(officeLoc)
{
var loc = officeLoc;
var xmlDoc=null;
var xmlFilename = 'http://mywebsite.com/Portals/0/successstoryimages/ImageRotator_' + loc + '.xml';
if(window.ActiveXObject)//Code for IE
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)//Code for Mozilla, Firefox, Opera, etc.
{
xmlDoc = document.implementation.createDocument("","",null);
}
else
{
alert('Sorry, your browser is not capable of loading these images.');
}
if(xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load(xmlFilename);
picDirectory = 'http://mywebsite.com/Portals/0/successstoryimages/' + loc + '/';
imgs1 = new Array();
storyLocation = new Array();
alt1 = new Array();
var x = xmlDoc.getElementsByTagName("story");
for(var i=0; i<x.length; i++)
{
imgs1.push(x[i].getElementsByTagName("imageFilename")[0].childNodes[0].nodeValue);
storyLocation.push(x[i].getElementsByTagName("storyLocation")[0].childNodes[0].nodeValue);
alt1.push(x[i].getElementsByTagName("compName")[0].childNodes[0].nodeValue);
}
var delayTime = 3000;
randomInt = Math.floor(Math.random()*imgs1.length);
shown = new Array();
document.write('<center><a href = "' + storyLocation[randomInt] + '" id="adLink1" target="_top">');
document.write('<img src = "' + picDirectory + imgs1[randomInt] + '" id="adBanner1" border="0" width="350" height="250">');
document.write('<span id = "textLink" style="font-size:small;"></span></a></center>');
document.getElementById("textLink").innerHTML = alt1[randomInt];
window.setInterval("cycle1()", delayTime);
}
}
function cycle1()
{
if(shown.length==imgs1.length)
{
shown.length = 0;
}
else
{
while (!isOkToShow())
{
randomInt = Math.floor(Math.random()*imgs1.length);
}
shown.push(randomInt);
document.getElementById('adBanner1').src = picDirectory + imgs1[randomInt];
document.getElementById('adBanner1').alt = alt1[randomInt];
document.getElementById('adLink1').href = storyLocation[randomInt];
document.getElementById('textLink').innerHTML = alt1[randomInt];
}
}
function isOkToShow()
{
for(var i=0; i<shown.length-1; i++)
{
if(randomInt == shown[i]) return false;
}
return true;
}