Hyperlink on image rotator...

jekholm · 09-09-2012, 07:16 AM

I am using the following code to rotate images on my home page for 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***************

vwphillips · 09-09-2012, 09:55 AM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Fade Slide Show (09-September-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcFade={

 init:function(o){
  var id=o.ID,ary=o.SRCArray,ims=o.FadeInDuration,oms=o.FadeOutDuration,hold=o.HoldDelay,obj=document.getElementById(id),ims=typeof(ims)=='number'?ims:typeof(oms)=='number'?oms:1000,img,z0=0;
  for (;z0<ary.length;z0++){
   img=new Image();
   img.src=ary[z0][0];
   ary[z0][0]=img;
  }
  o=this['zxc'+id]={
   obj:obj,
   a:obj.parentNode,
   ary:ary,
   lgth:ary.length-1,
   ims:ims,
   oms:typeof(oms)=='number'?oms:ims,
   hold:typeof(hold)=='number'?hold:ims*2,
   now:100,
   cnt:0
  }
  this.Auto(id,o.hold);
 },

 Auto:function(id,ms){
  var o=this['zxc'+id]
  if (o){
   var oop=this;
   o.to=setTimeout(function(){ oop.next(id,true); },ms||200);
  }
 },

 Pause:function(id){
  var o=this['zxc'+id]
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id]
  if (o){
   this.next(id,o.cnt+(typeof(ud)=='number'&&ud<0?-1:1));
  }
 },

 GoTo:function(id,nu){
  var o=this['zxc'+id]
  if (o&&o.ary[nu]&&nu!=o.cnt){
   this.next(id,nu);
  }
 },

 next:function(id,auto){
  var o=this['zxc'+id],nu;
  if (o){
   this.Pause(id);
   o.auto=auto===true;
   nu=o.auto?o.cnt+1:auto;
   o.cnt=nu<0?o.lgth:nu>o.lgth?0:nu;
   o.a.removeAttribute('href');
   clearTimeout(o.dly);
   this.animate(o,o.obj,o.now,0,new Date(),o.oms);
  }
 },

 animate:function(o,obj,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style.filter='alpha(opacity='+now+')';
   obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
   o.now=now;
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
  }
  else {
   if (t==0){
    obj.src=o.ary[o.cnt][0].src;
    if (o.ary[o.cnt][1]){
     o.a.href=o.ary[o.cnt][1];
    }
    clearTimeout(o.dly);
    this.animate(o,o.obj,o.now,100,new Date(),o.ims);
   }
   else if (o.auto){
    oop.Auto(obj.id,o.hold);
   }
  }
 }

}

/*]]>*/
</script>

</head>

<body>

<input type="button" name="" value="GoTo 0" onmouseup="zxcFade.GoTo('frontphoto',0);"  />
<input type="button" name="" value="GoTo 1" onmouseup="zxcFade.GoTo('frontphoto',1);"  />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFade.GoTo('frontphoto',2);"  />
<input type="button" name="" value="GoTo 3" onmouseup="zxcFade.GoTo('frontphoto',3);"  />
<input type="button" name="" value="GoTo 4" onmouseup="zxcFade.GoTo('frontphoto',4);"  />
<input type="button" name="" value="Next" onmouseup="zxcFade.Next('frontphoto',1);"  />
<input type="button" name="" value="Back" onmouseup="zxcFade.Next('frontphoto',-1);"  />
<br />
<a><img id="frontphoto" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" border="0" onmouseover="zxcFade.Pause('frontphoto');" onmouseout="zxcFade.Auto('frontphoto');" /></a>
<script type="text/javascript">
/*<![CDATA[*/

zxcFade.init({
 ID:'frontphoto',
 SRCArray:[
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','URL1.htm'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','URL2.htm'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','URL3.htm'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','URL4.htm'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','URL5.htm']
 ],
 FadeInDuration:1000,
 FadeOutDuration:500,
 HoldDelay:3000
});


/*]]>*/
</script>
</body>

</html>