Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hyperlink on image rotator...

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

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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    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>
    Last edited by vwphillips; 09-09-2012 at 12:57 PM. Reason: Added Pause, Auto, GoTo and Next functions
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •