I am using the following code to rotate images on my home page for and I would like to hyperlink each of the images in the rotator to go to a different page in the website, but I am not sure how to write in the hyperlink code. Could somebody please help me.
I apologize in advance if my post is not forum correct - I was just looking for help and I have never used the forums before. I have looked all over for a solution to this problem but as I am more design oriented than coding oriented - this has me stumped. Thank you for your help.
****************CODE BELOW***************
<!-- Hide from older browsers
var totalPics; //total announcements
var picNumber; //current announcement number
var dirOpacity; //current opacity direction
var currentOpacity;
var minOpacity; //minimum amount of opacity fade out
var fadeInRate = .01;
var fadeOutRate = .05;
var maxImageWaitTime = 4; //number of seconds to keep image at 100% opacity
var currentImageWaitTime = 0; //number of seconds image has been at 100% opacity
var pic1 = new Image;
var pic2 = new Image;
var pic3 = new Image;
var pic4 = new Image;
var pic5 = new Image;
//var pic6 = new Image;
function StartPics()
{
totalPics = 5;
picNumber = 1;
dirOpacity = false;
if (navigator.appName != "Microsoft Internet Explorer")
{
minOpacity = .08;
currentOpacity = .99;
}
else
{
minOpacity = 8;
currentOpacity = 99;
}
//////////////////////////////////////////////////////
//
//preload pics
//
pic1.src = "Images/iStock_000003869564Medium.jpg"
pic2.src = "Images/iStock_000019966425Medium.jpg";
pic3.src = "Images/iStock_000009162126Medium.jpg";
pic4.src = "Images/iStock_000020292796Medium.jpg";
pic5.src = "Images/iStock_000018681953Medium.jpg";
//pic6.src = "images/testimonial-for-team-on-waterfall.jpg";
//
//////////////////////////////////////////////////////
setInterval('LoadPics()', 50);
}
function LoadPics()
{
if (currentImageWaitTime < maxImageWaitTime)
{
currentImageWaitTime += .05;
return;
}
var fImage = document.getElementById('frontphoto');
//TODO: Use IE version of opacity if current browser is IE
if (navigator.appName != "Microsoft Internet Explorer")
{
fImage.style.opacity = currentOpacity;
}
else
{
fImage.style.filter="alpha(opacity=" + currentOpacity + ")";
}
switch (picNumber)
{
case 1:
fImage.src = pic1.src;
break;
case 2:
fImage.src = pic2.src;
break;
case 3:
fImage.src = pic3.src;
break;
case 4:
fImage.src = pic4.src;
break;
case 5:
fImage.src = pic5.src;
break;
}
if (dirOpacity == true)
{
if (navigator.appName != "Microsoft Internet Explorer")
{
currentOpacity += .01;
if (currentOpacity > .99)
{
currentImageWaitTime = 0;
dirOpacity = false;
}
}
else
{
currentOpacity += fadeInRate * 100;
if (currentOpacity > 99)
{
currentImageWaitTime = 0;
dirOpacity = false;
}
}
}
else
{
if (navigator.appName != "Microsoft Internet Explorer")
{
currentOpacity -= fadeOutRate;
if (currentOpacity < minOpacity)
{
picNumber++;
if (picNumber > totalPics)
{
picNumber=1;
}
dirOpacity = true;
}
}
else
{
currentOpacity -= fadeOutRate * 100;
if (currentOpacity < minOpacity)
{
picNumber++;
if (picNumber > totalPics)
{
picNumber=1;
}
dirOpacity = true;
}
}
}
}
//Hide from older browsers -->
I apologize in advance if my post is not forum correct - I was just looking for help and I have never used the forums before. I have looked all over for a solution to this problem but as I am more design oriented than coding oriented - this has me stumped. Thank you for your help.
****************CODE BELOW***************
<!-- Hide from older browsers
var totalPics; //total announcements
var picNumber; //current announcement number
var dirOpacity; //current opacity direction
var currentOpacity;
var minOpacity; //minimum amount of opacity fade out
var fadeInRate = .01;
var fadeOutRate = .05;
var maxImageWaitTime = 4; //number of seconds to keep image at 100% opacity
var currentImageWaitTime = 0; //number of seconds image has been at 100% opacity
var pic1 = new Image;
var pic2 = new Image;
var pic3 = new Image;
var pic4 = new Image;
var pic5 = new Image;
//var pic6 = new Image;
function StartPics()
{
totalPics = 5;
picNumber = 1;
dirOpacity = false;
if (navigator.appName != "Microsoft Internet Explorer")
{
minOpacity = .08;
currentOpacity = .99;
}
else
{
minOpacity = 8;
currentOpacity = 99;
}
//////////////////////////////////////////////////////
//
//preload pics
//
pic1.src = "Images/iStock_000003869564Medium.jpg"
pic2.src = "Images/iStock_000019966425Medium.jpg";
pic3.src = "Images/iStock_000009162126Medium.jpg";
pic4.src = "Images/iStock_000020292796Medium.jpg";
pic5.src = "Images/iStock_000018681953Medium.jpg";
//pic6.src = "images/testimonial-for-team-on-waterfall.jpg";
//
//////////////////////////////////////////////////////
setInterval('LoadPics()', 50);
}
function LoadPics()
{
if (currentImageWaitTime < maxImageWaitTime)
{
currentImageWaitTime += .05;
return;
}
var fImage = document.getElementById('frontphoto');
//TODO: Use IE version of opacity if current browser is IE
if (navigator.appName != "Microsoft Internet Explorer")
{
fImage.style.opacity = currentOpacity;
}
else
{
fImage.style.filter="alpha(opacity=" + currentOpacity + ")";
}
switch (picNumber)
{
case 1:
fImage.src = pic1.src;
break;
case 2:
fImage.src = pic2.src;
break;
case 3:
fImage.src = pic3.src;
break;
case 4:
fImage.src = pic4.src;
break;
case 5:
fImage.src = pic5.src;
break;
}
if (dirOpacity == true)
{
if (navigator.appName != "Microsoft Internet Explorer")
{
currentOpacity += .01;
if (currentOpacity > .99)
{
currentImageWaitTime = 0;
dirOpacity = false;
}
}
else
{
currentOpacity += fadeInRate * 100;
if (currentOpacity > 99)
{
currentImageWaitTime = 0;
dirOpacity = false;
}
}
}
else
{
if (navigator.appName != "Microsoft Internet Explorer")
{
currentOpacity -= fadeOutRate;
if (currentOpacity < minOpacity)
{
picNumber++;
if (picNumber > totalPics)
{
picNumber=1;
}
dirOpacity = true;
}
}
else
{
currentOpacity -= fadeOutRate * 100;
if (currentOpacity < minOpacity)
{
picNumber++;
if (picNumber > totalPics)
{
picNumber=1;
}
dirOpacity = true;
}
}
}
}
//Hide from older browsers -->