www.webdeveloper.com
Results 1 to 3 of 3

Thread: need a specific A Href for each of the auto changing image when clicked

  1. #1
    Join Date
    Dec 2013
    Posts
    1

    need a specific A Href for each of the auto changing image when clicked

    How do I add a specific A Href call for each of the images that are changing? I am not sure how to go about adding that option into my current script (which is working correctly). Thank you...



    <script type="text/javascript">

    var currPic=1;

    var totPics=3;

    var keepTime;

    function setupPicChange()

    { keepTime=setTimeout("changePic()", 3500); }

    function changePic()

    { currPic++; if(currPic>totPics) currPic=1;

    document.getElementById("picture").src="images/pic"+currPic+".jpg";

    setupPicChange(); }

    function stopTimer()

    { clearTimeout(keepTime); }

    function startTimer()

    { keepTime=setTimeout("changePic()", 5000); }

    </script>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    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>
    <style type="text/css">
    /*<![CDATA[*/
    #ss {
     position:absolute;left:0px;top:71px; width: 200px; height: 150px; border: 0; margin: 0;
    }
    
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <input type="button" name="" value="Next"onmouseup="zxcSlideShow.Next('ss',1);" />
    <input type="button" name="" value="Back"onmouseup="zxcSlideShow.Next('ss',-1);" />
    <input type="button" name="" value="GoTo 0"onmouseup="zxcSlideShow.GoTo('ss',0);" />
    <input type="button" name="" value="GoTo 1"onmouseup="zxcSlideShow.GoTo('ss',1);" />
    <input type="button" name="" value="GoTo 2"onmouseup="zxcSlideShow.GoTo('ss',2);" />
    <input type="button" name="" value="Pause"onmouseup="zxcSlideShow.Pause('ss');" />
    <input type="button" name="" value="Auto"onmouseup="zxcSlideShow.Auto('ss');" />
    
    <a><img id="ss" src="http://www.vicsjavascripts.site88.net/StdImages/0.gif" /></a>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Show (01-January-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org
    
    var zxcSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.ary[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ImageID,ary=o.SRCArray,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,n=0,img=document.getElementById(id);
      if (img&&ary instanceof Array){
       o.img=img;
       o.a=img.parentNode;
       o.ary=ary;
       o.id=id;
       o.hold=typeof(hold)=='number'&&hold>20?hold:2000;
       o.n=n;
       o.ud=1;
       o.lgth=o.ary.length-1;
       this['zxc'+id]=o;
       this.rotate(o,n);
       typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,au){
      this.Pause(o.id);
      var n=o.n;
      o.a.removeAttribute('href');
      o.img.removeAttribute('title');
      o.auto=au===true;
      n=o.auto?n+o.ud:au;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.img.src=o.ary[n][0];
      o.ary[n][1]?o.img.title=o.ary[n][1]:null;
      o.ary[n][2]?o.a.href=o.ary[n][2]:null;
      o.n=n;
      o.auto?this.Auto(o.id,o.hold):null;
    
     }
    
    }
    
    zxcSlideShow.init({
     ImageID:'ss',
     SRCArray:[
      // field 0 = the image SRC
      // field 1 = the image title
      // field 1 = the image SRC link HREF
      ['http://www.vicsjavascripts.site88.net/StdImages/0.gif','Zero','url0.htm'],
      ['http://www.vicsjavascripts.site88.net/StdImages/1.gif','One','url1.htm'],
      ['http://www.vicsjavascripts.site88.net/StdImages/2.gif','Two','url2.htm']
     ],
     AutoHold:4000,
     AutoStart:1000
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    or

    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>
    <style type="text/css">
    /*<![CDATA[*/
    #ss {
     position:absolute;left:0px;top:71px; width: 200px; height: 150px; border: 0; margin: 0;
    }
    
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <input type="button" name="" value="Next"onmouseup="zxcFadeSlideShow.Next('ss',1);" />
    <input type="button" name="" value="Back"onmouseup="zxcFadeSlideShow.Next('ss',-1);" />
    <input type="button" name="" value="GoTo 0"onmouseup="zxcFadeSlideShow.GoTo('ss',0);" />
    <input type="button" name="" value="GoTo 1"onmouseup="zxcFadeSlideShow.GoTo('ss',1);" />
    <input type="button" name="" value="GoTo 2"onmouseup="zxcFadeSlideShow.GoTo('ss',2);" />
    <input type="button" name="" value="Pause"onmouseup="zxcFadeSlideShow.Pause('ss');" />
    <input type="button" name="" value="Auto"onmouseup="zxcFadeSlideShow.Auto('ss');" />
    
    <div id="ss" onmouseover="zxcFadeSlideShow.Pause('ss');" onmouseout="zxcFadeSlideShow.Auto('ss');" ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show (01-January-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org
    
    var zxcFadeSlideShow={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.ary[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ParentID,ary=o.SRCArray,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,n=0,p=document.getElementById(id);
      if (p&&ary instanceof Array){
       var img,z0=0;
       o.a=document.createElement('A');
       p.appendChild(o.a);
       o.ary=[];
       for (;z0<ary.length;z0++){
        if (ary[z0]&&typeof(ary[z0][0])=='string'){
         i=o.ary.length;
         img=document.createElement('IMG');
         img.style.position='absolute';
         img.style.zIndex=i!=n?'0':'2';
         img.style.left=img.style.top='0px';
         img.style.width=img.style.height='100%';
         img.src=ary[i][0];
         this.opc(img,i!=n?0:100);
         ary[i][1]?img.title=ary[i][1]:null;
         o.a.appendChild(img);
         o.ary[i]=[img,ary[i][2],i!=n?0:100];
        }
       }
       o.ary[n][1]?o.a.href=o.ary[n][1]:null;
       o.id=id;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>20?hold:o.ms*4;
       o.n=n;
       o.ud=1;
       o.lgth=o.ary.length-1;
       this['zxc'+id]=o;
       typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,au){
      this.Pause(o.id);
      var n=o.n,a=o.ary[o.n];
      a[0].style.zIndex='0';
      o.a.removeAttribute('href');
      this.animate(o,a,a[2],0,new Date(),o.ms);
      o.auto=au===true;
      n=o.auto?n+o.ud:au;
      n=n<0?o.lgth:n>o.lgth?0:n;
      a=o.ary[n];
      a[0].style.zIndex='2'
      a[1]?o.a.href=a[1]:null;
      this.animate(o,a,a[2],100,new Date(),o.ms);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(n,0);
       this.opc(a[0],a[2]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       this.opc(a[0],a[2]);
       o.auto&&t==100?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     }
    
    }
    
    zxcFadeSlideShow.init({
     ParentID:'ss',
     SRCArray:[
      // field 0 = the image SRC
      // field 1 = the image title
      // field 1 = the image SRC link HREF
      ['http://www.vicsjavascripts.site88.net/StdImages/0.gif','Zero','url0.htm'],
      ['http://www.vicsjavascripts.site88.net/StdImages/1.gif','One','url1.htm'],
      ['http://www.vicsjavascripts.site88.net/StdImages/2.gif','Two','url2.htm']
     ],
     Animate:1000,
     AutoHold:4000,
     AutoStart:1000
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/

  3. #3
    Join Date
    Mar 2011
    Posts
    1,139
    Or you could just add a few modifications to the original code to add an 'onclick' function and eliminate the need to use particular image file names:
    Code:
    <script type="text/javascript">
    
    var currPic=0;
    var keepTime;
    var pics = new Array('images/pic0.jpg', 'images/pic1.jpg', 'images/pic2.jpg');
    var urls = new Array('http://www.example.com', 'http://www.example2.com', 'http://www.example3.com');
    var totPics=pics.length;
    
    function newPage() {
      document.location = urls[currPic];
    }
    
    function setupPicChange()
    { keepTime=setTimeout("changePic()", 3500); }
    
    function changePic()
    { currPic++; if(currPic == totPics) currPic=0;
    
    document.getElementById("picture").src = pics[currPic];
    
    setupPicChange(); }
    
    function stopTimer()
    { clearTimeout(keepTime); }
    
    function startTimer()
    {
      document.getElementById("picture").onclick = newPage;
      keepTime=setTimeout("changePic()", 5000);
    }
    
    </script>
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles