Hyperlink image rotator...

[Snapa02]

I am using the following code to rotate images on my home page for

http://www.onoradsolutions.com

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 -->

 

[ChrisHirst]

Wrap the image element (frontphoto) in an anchor element with an ID of say "frontpic"

create an array of URLs in the same order as the images that correspond to the URL to go to (pic1.href .. pic5.href)

create a reference to the anchor element with getElementById
var picAnchor = document.getElementById('anchorid')

Then at every switch statement line add in;

picAnchor.href = picx.href; // replace x with the appropriate numeral




Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Snapa02]

Very nice - thanks Chris - I'll give it a go.

 

[Snapa02]

Hey Chris - I just tried a different script and I have it working... all but, I want a fade in and out with each image.... not sure how to do that. Anyway - here is the code I am using.

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (

http://www.dynamicdrive.com)

* This notice must stay intact for use
* Visit

http://www.dynamicdrive.com/

for full source code
***********************************************/
var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['Images/iStock_000003869564Medium.jpg', '

http://www.onoradsolutions.com/strategic_training.html',

'']
variableslide[1]=['Images/iStock_000019966425Medium.jpg', '

http://www.onoradsolutions.com/staffing_solutions.html',

'']
variableslide[2]=['Images/iStock_000009162126Medium.jpg', '

http://www.onoradsolutions.com/elearning.html',

'']
variableslide[3]=['Images/iStock_000020292796Medium.jpg', '

http://www.onoradsolutions.com/help.html',

'']
variableslide[4]=['Images/iStock_000018681953Medium.jpg', '

http://www.onoradsolutions.com/super_user.html',

'']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='695px' //set to width of LARGEST image in your slideshow
var slideheight='279px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#FFFFFF'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=8000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>