Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: B&W to Color on MouseOver slideshow with links to pages for each picture HELP...

  1. #1
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default B&W to Color on MouseOver slideshow with links to pages for each picture HELP...

    Hey guys, I am looking for some help. I have looked everywhere online for code to do this but I can't find exactly what I am looking for or if I think I have, it doesn't work. I am fresh meat at this so I don't know how to do a lot, but can figure a lot of things out. The website I am most trying to model is : http://coldwellbankerpreviews.com/. B&W to Color on MouseOver slideshow with links to pages for each picture is what I am trying to do like the one on the main page. If someone can help me, I would greatly appreciate it. If you need more information from me, please let me know..

    Thank you,
    Andy
    Last edited by Beverleyh; 03-21-2014 at 07:28 AM. Reason: Formatting

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    In principle with the background images chnged to your B&W images


    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[*/
    
    #slideshow {
      position:absolute;left:100px;top:100px;width:350px;height:263px;background-Color:#FFCC66;
    }
    
    .page {
      position:absolute;left:0px;top:0px;width:350px;height:263px;background-Color:#FFFFCC;
    }
    
    .page IMG {
      position:absolute;left:0px;top:-300px;width:350px;height:263px;border-Width:0px;
    }
    
    .page0 {
      background-Image:url(http://www.vicsjavascripts.org/StdImages/0.gif);
    }
    
    .page1 {
      background-Image:url(http://www.vicsjavascripts.org/StdImages/1.gif);
    }
    
    .page2 {
      background-Image:url(http://www.vicsjavascripts.org/StdImages/2.gif);
    }
    
    #forward {
      position:absolute;z-Index:10;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
    }
    
    #back {
      position:absolute;z-Index:10;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('slideshow',0);"/>
     <input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('slideshow',1);"/>
     <input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('slideshow',2);"/>
    
     <div id="slideshow" >
      <div class="page page0" >
       page 0
       <a href="http://www.vicsjavascripts.org/"><img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="img" /></a>
      </div>
      <div class="page page1" >
       page 1
       <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="img" />
      </div>
      <div class="page page2" >
       page 2
       <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="img" />
      </div>
      <div id="forward" ></div>
      <div id="back" ></div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Mouseover Fade Slide Show. (21-March-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.a[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['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);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[];
      if (pgs[0]){
       var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0;
       o.a=[]
       for (;z0<pgs.length;z0++){
        i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG');
        i.style.top='-3000px';
        pgs[z0].style.top=(z0!=n?-3000:0)+'px';
        o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]];
       }
       o.id=id;
       o.n=n;
       o.ud=1;
       o.lgth=z0-1;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       this.addevt(p,'mouseover','mse',o,false);
       this.addevt(p,'mouseout','mse',o,true);
       for (;z1<add.length;z1++){
        if (add[z1]&&add[z1][0]){
         n=document.getElementById(add[z1][0]);
         i=add[z1][1];
         if (n&&this[add[z1][2]]){
          this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]);
         }
        }
       }
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>20?this.Auto(id,s):null;
      }
     },
    
     mse:function(o,ud){
      ud===false?this.Pause(o.id):null;
      this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':'');
      o.a[o.n][1][0].style.top='0px';
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      this.mse(o,true);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.a[o.n][0][0].style.zIndex='0';
      this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide');
      o.a[n][0][0].style.zIndex='1';
      o.a[n][0][0].style.top='0px';
      this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto');
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,x){
      clearTimeout(a[5]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],a[1]);
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
      }
      else {
       a[1]=t;
       oop.opc(a[0],t);
       x=='hide'?a[0].style.top='-3000px':null;
       x=='auto'&&o.auto?oop.Auto(o.id,o.h):null;
      }
     },
    
     opc:function zxcOpacity(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     bycls:function (n,o,t){
      for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
       if((' '+c[z0].className+' ').match(' '+n+' ')){
        a.push(c[z0]);
       }
      }
      return a;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlideShow.init({
     ParentID:'slideshow',        // the unique ID name of the slide show parent DIV.                                     (string)
     PageClass:'page',            // the common class name of the slide show pages.                                       (string)
     FadeDuration:1000,           //(optional) the fade duration in milliseconds.                                         (number, default = 1000)
     AddEvents:[                  //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the script function name.
      // field 3 = the control parameter to pass to the function.
      ['slideshow','mouseout','Auto'],
      ['forward','mouseup','Next',1],
      ['back','mouseup','Next',-1]
     ],
     AutoHold:2000,              //(optional) the auto rotation fade 'hold' delay in milli seconds.                      (number, default = FadeDuration*4)
     AutoStart:2000              //(optional) the delay before starting auto rotation.                                   (number, default = no auto start)
    });
    
    
    
    /*]]>*/
    </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 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey Vic, Thank you for replying so quickly. I may be too much of a newb or this is just way over my head because I can't get it to work. When I add this all I get are three little buttons that say "go to 0, go to 1, and go to 2". Can you tell me what I am doing wrong (probably everything). I really appreciate any more help you can give me...

    Andy

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    I have tested the script with IE and FF

    see
    http://www.vicsjavascripts.org/Demos/140321A.htm
    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/

  5. #5
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It says the page cannot be displayed in Chrome and IE from the link. I am a realtor and most of the websites we use only work with Chrome...

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    I used chrome to view the link and it works for me
    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/

  7. #7
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey Vic, like I said, thank you for taking the time to help me. I have half way figured it out but still having some problms.
    1)How do I add the address for when you cllck on the picture?
    2)After the last picture, the slide show yellows out. I tried to add more slides, but it just kept doing that after the first three..
    3)How do I add more pics to the slide show? (Like I said, it yellows out after the first three)

    I will add what I have done and I am sure you can look at it quickly and see if I have screwed something up.
    Thanks again,
    Andy
    www.wbreg.com
    Last edited by AndyWarren; 03-24-2014 at 05:37 AM.

  8. #8
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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[*/
    
    #slideshow {
      position:absolute;left:0px;top:0px;width:1000px;height:600px;background-Color:#FFCC66;
    }
    
    .page {
      position:absolute;left:0px;top:0px;width:1000px;height:600px;background-Color:#FFFFCC;
    }
    
    .page IMG {
      position:absolute;left:0px;top:-0px;width:1000px;height:600px;border-Width:0px;
    }
    
    .page0 {
      background-Image:url(http://farm4.staticflickr.com/3833/1...1846a2_b.jpg);
    }
    
    .page1 {
      background-Image:url(http://farm4.staticflickr.com/3790/1...a80a3f_b.jpg);
    }
    
    .page2 {
      background-Image:url(http://farm8.staticflickr.com/7295/1...999185_b.jpg);
    }
    
    
    #forward {
      position:absolute;z-Index:50;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
    }
    
    #back {
      position:absolute;z-Index:50;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('slideshow',0);"/>
     <input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('slideshow',1);"/>
     <input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('slideshow',2);"/>
    
     <div id="slideshow" >
      <div class="page page0" >
       page 0
       <a href=""><img src="http://farm4.staticflickr.com/3665/13370845404_cdbf18a61a_b.jpgg" alt="img" /></a>
      </div>
      <div class="page page1" >
       page 1
       <img src="http://farm8.staticflickr.com/7176/13370485155_cc7da58226_b.jpg" alt="img" />
      </div>
      <div class="page page2" >
       page 2
       <img src="http://farm4.staticflickr.com/3665/13370845404_cdbf18a61a_b.jpg" alt="img" />
      <div class="page page0" >
       
      </div>
      <div id="forward" ></div>
      <div id="back" ></div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Mouseover Fade Slide Show. (21-March-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.a[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['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);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[];
      if (pgs[0]){
       var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0;
       o.a=[]
       for (;z0<pgs.length;z0++){
        i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG');
        i.style.top='-3000px';
        pgs[z0].style.top=(z0!=n?-3000:0)+'px';
        o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]];
       }
       o.id=id;
       o.n=n;
       o.ud=1;
       o.lgth=z0-1;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       this.addevt(p,'mouseover','mse',o,false);
       this.addevt(p,'mouseout','mse',o,true);
       for (;z1<add.length;z1++){
        if (add[z1]&&add[z1][0]){
         n=document.getElementById(add[z1][0]);
         i=add[z1][1];
         if (n&&this[add[z1][2]]){
          this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]);
         }
        }
       }
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>20?this.Auto(id,s):null;
      }
     },
    
     mse:function(o,ud){
      ud===false?this.Pause(o.id):null;
      this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':'');
      o.a[o.n][1][0].style.top='0px';
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      this.mse(o,true);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.a[o.n][0][0].style.zIndex='0';
      this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide');
      o.a[n][0][0].style.zIndex='1';
      o.a[n][0][0].style.top='0px';
      this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto');
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,x){
      clearTimeout(a[5]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],a[1]);
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
      }
      else {
       a[1]=t;
       oop.opc(a[0],t);
       x=='hide'?a[0].style.top='-3000px':null;
       x=='auto'&&o.auto?oop.Auto(o.id,o.h):null;
      }
     },
    
     opc:function zxcOpacity(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     bycls:function (n,o,t){
      for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
       if((' '+c[z0].className+' ').match(' '+n+' ')){
        a.push(c[z0]);
       }
      }
      return a;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlideShow.init({
     ParentID:'slideshow',        // the unique ID name of the slide show parent DIV.                                     (string)
     PageClass:'page',            // the common class name of the slide show pages.                                       (string)
     FadeDuration:1000,           //(optional) the fade duration in milliseconds.                                         (number, default = 1000)
     AddEvents:[                  //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the script function name.
      // field 3 = the control parameter to pass to the function.
      ['slideshow','mouseout','Auto'],
      ['forward','mouseup','Next',1],
      ['back','mouseup','Next',-1]
     ],
     AutoHold:2000,              //(optional) the auto rotation fade 'hold' delay in milli seconds.                      (number, default = FadeDuration*4)
     AutoStart:2000              //(optional) the delay before starting auto rotation.                                   (number, default = no auto start)
    });
    
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    your HTML code is a real mess with HTML before and after the <BODY> tag, you will need to sort that out
    I tried to sort it out but it would be better to start again


    the slideshow works fine

    Code:
     <!DOCTYPE html><html lang="en" dir="ltr">
    
    <head>
    <title>Welcome
    </title>
    
    
    <style type="text/css">
    /*
    <![CDATA[*/
    
    #slideshow {
      position:absolute;left:0px;top:0px;width:1600px;height:1067px;background-Color:#FFCC66;
    }
    
    .page {
      position:absolute;left:0px;top:0px;width:1600px;height:1067px;background-Color:#FFFFCC;
    }
    
    .page IMG {
      position:absolute;left:0px;top:-0px;width:1600px;height:1067px;border-Width:0px;
    }
    
    .page0 {
      background-Image:url(https://farm8.staticflickr.com/7038/13372273565_3d948ff9a8_h.jpg);
    }
    
    .page1 {
      background-Image:url(https://farm3.staticflickr.com/2868/13372657464_8d78f46ad0_h.jpg);
    }
    
    .page2 {
      background-Image:url(https://farm8.staticflickr.com/7300/13372287985_7728e1c0a3_h.jpg);
    }
    
    
    #forward {
      position:absolute;z-Index:250;left:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
    }
    
    #back {
      position:absolute;z-Index:250;right:0px;top:100px;width:30px;height:50px;background-Color:#CCFFFF;border:solid red 1px;cursor:pointer;
    }
    
    /*]]>*/
    
    </style>
    </head>
    
    
    <body>
    
    
    ;"/>
    
    
    <div id="slideshow" >
    
    <div class="page page0" >
    
    <a href="">
    <img src="http://www.vicsjavascripts.org/StdImages/0.gif" alt="img" />
    </a>
    
    </div>
    
    <div class="page page1" >
    
    <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="img" />
    
    </div>
    
    <div class="page page2" >
    
    <img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="img" />
    
    
    </div>
    
    <div id="forward" >
    </div>
    
    <div id="back" >
    </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Mouseover Fade Slide Show. (21-March-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.a[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['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);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,ms=o.FadeDuration,add=o.AddEvents,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),pgs=p?this.bycls(o.PageClass,p,'DIV'):[];
      if (pgs[0]){
       var n=0,add=add instanceof Array?add:[],i,z0=0,z1=0;
       o.a=[]
       for (;z0<pgs.length;z0++){
        i=pgs[z0].getElementsByTagName('IMG')[0]||document.createElement('IMG');
        i.style.top='-3000px';
        pgs[z0].style.top=(z0!=n?-3000:0)+'px';
        o.a[z0]=[[pgs[z0],z0!=n?0:100],[i,0]];
       }
       o.id=id;
       o.n=n;
       o.ud=1;
       o.lgth=z0-1;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
       this.addevt(p,'mouseover','mse',o,false);
       this.addevt(p,'mouseout','mse',o,true);
       for (;z1<add.length;z1++){
        if (add[z1]&&add[z1][0]){
         n=document.getElementById(add[z1][0]);
         i=add[z1][1];
         if (n&&this[add[z1][2]]){
          this.addevt(n,i=='mouseup'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'click',add[z1][2],o.id,add[z1][3]);
         }
        }
       }
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>20?this.Auto(id,s):null;
      }
     },
    
     mse:function(o,ud){
      ud===false?this.Pause(o.id):null;
      this.animate(o,o.a[o.n][1],o.a[o.n][1][1],ud?0:100,new Date(),o.ms,ud?'hide':'');
      o.a[o.n][1][0].style.top='0px';
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      this.mse(o,true);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a;
      n=n<0?o.lgth:n>o.lgth?0:n;
      o.a[o.n][0][0].style.zIndex='0';
      this.animate(o,o.a[o.n][0],o.a[o.n][0][1],0,new Date(),o.ms,'hide');
      o.a[n][0][0].style.zIndex='1';
      o.a[n][0][0].style.top='0px';
      this.animate(o,o.a[n][0],o.a[n][0][1],100,new Date(),o.ms,'auto');
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,x){
      clearTimeout(a[5]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],a[1]);
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
      }
      else {
       a[1]=t;
       oop.opc(a[0],t);
       x=='hide'?a[0].style.top='-3000px':null;
       x=='auto'&&o.auto?oop.Auto(o.id,o.h):null;
      }
     },
    
     opc:function zxcOpacity(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     bycls:function (n,o,t){
      for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
       if((' '+c[z0].className+' ').match(' '+n+' ')){
        a.push(c[z0]);
       }
      }
      return a;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlideShow.init({
     ParentID:'slideshow',        // the unique ID name of the slide show parent DIV.                                     (string)
     PageClass:'page',            // the common class name of the slide show pages.                                       (string)
     FadeDuration:1000,           //(optional) the fade duration in milliseconds.                                         (number, default = 1000)
     AddEvents:[                  //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the script function name.
      // field 3 = the control parameter to pass to the function.
      ['slideshow','mouseout','Auto'],
      ['forward','mouseup','Next',1],
      ['back','mouseup','Next',-1]
     ],
     AutoHold:2000,              //(optional) the auto rotation fade 'hold' delay in milli seconds.                      (number, default = FadeDuration*4)
     AutoStart:2000              //(optional) the delay before starting auto rotation.                                   (number, default = no auto start)
    });
    
    
    
    /*]]>*/
    </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/

  10. #10
    Join Date
    Mar 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Like I said, I am a newb. This site is actually done through godaddy's website builder so blame them for the messy code. I am just good at copying and pasting what you have sent. I am very happy with what you set me up with so i just wanted to say thank you...
    Andy

Similar Threads

  1. Random picture selection with links to different pages
    By Yabzab in forum Looking for such a script or service
    Replies: 1
    Last Post: 06-09-2011, 03:46 PM
  2. Establishing a default picture when no mouseover
    By b4greg in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-22-2008, 10:03 PM
  3. mouseover thumbnail to large picture
    By webmom in forum CSS
    Replies: 2
    Last Post: 09-06-2007, 09:47 AM
  4. Picture appears on text mouseover
    By MTD in forum JavaScript
    Replies: 1
    Last Post: 08-18-2006, 01:58 AM
  5. picture on mouseover outside frame
    By jlvanliere in forum JavaScript
    Replies: 2
    Last Post: 05-08-2005, 03:34 PM

Bookmarks

Posting Permissions

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