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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need to add a pause on mouseover

    I'm just a pirate here, trying to add a mouseover code to a borrowed script. If anyone could help; I'd sure appreciate it!

    Again, I am NOT a coder, so please be as specific as you can!

    <script type="text/javascript">// <![CDATA[
    //preload images
    var image1=new Image()
    image1.src="../../images/nex+add.png"
    var image2=new Image()
    image2.src="../../images/Sale Promo/bar h promo.png"
    var image3=new Image()
    image3.src="../../images/Sale Promo/roper_hooey.png"
    // ]]></script>
    <a href="javascript:slidelink()"> <img src="../../images/nex+add.png" name="slide" border="0" height="250" width="475" /></a>
    <script type="text/javascript">// <![CDATA[
    var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    whichimage=step
    if (step<3)
    step++
    else
    step=1
    setTimeout("slideit()",3000)
    }
    slideit()
    function slidelink(){
    if (whichimage==1)
    window.location="http://horseflyequine.com/heel-o-maticnexcalfropingdummy.aspx"
    else if (whichimage==2)
    window.location="http://horseflyequine.com/horse/tack.aspx"
    else if (whichimage==3)
    window.location="http://horseflyequine.com/westernwear.aspx"
    }
    // ]]></script>

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Whats suppose to happen when you mouse over then? And what are we mousing over?
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 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>
    </head>
    
    <body>
    <script type="text/javascript">// <![CDATA[
    //preload images
    var image1=new Image()
    image1.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
    var image2=new Image()
    image2.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"
    var image3=new Image()
    image3.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"
    // ]]>
    </script>
    <a href="javascript:slidelink()"> <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
    onmouseover="pause();" onmouseout="auto();"
    name="slide" border="0" height="250" width="475" /></a>
    
    
    <script type="text/javascript">// <![CDATA[
    
    var step=1
    var whichimage=1
    
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=window["image"+step].src;
    whichimage=step
    if (step<3)
    step++
    else
    step=1
    !slideit.stop?auto(3000):null;
    }
    
    function auto(ms){
     slideit.to=setTimeout(function(){ slideit.stop=false; slideit(); },ms||200)
    }
    
    function pause(){
     clearTimeout(slideit.to);
     slideit.stop=true;
    }
    
    slideit()
    
    function slidelink(){
    if (whichimage==1)
    window.location="http://horseflyequine.com/heel-o-maticnexcalfropingdummy.aspx"
    else if (whichimage==2)
    window.location="http://horseflyequine.com/horse/tack.aspx"
    else if (whichimage==3)
    window.location="http://horseflyequine.com/westernwear.aspx"
    }
    // ]]></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>
    </head>
    
    <body>
     Simple Slide Show  with animated fade<br />
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSimpleSlideShow.GoTo('E4',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSimpleSlideShow.GoTo('E4',1);" />
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSimpleSlideShow.GoTo('E4',2);" />
     <input type="button" name="" value="GoTo 3" onmouseup="zxcSimpleSlideShow.GoTo('E4',3);" />
     <input type="button" name="" value="Next" onmouseup="zxcSimpleSlideShow.Next('E4',1);" />
     <input type="button" name="" value="Back" onmouseup="zxcSimpleSlideShow.Next('E4',-1);" />
     <br />
     <a><img title="tst" id="E4" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" border="0"  onmouseover="zxcSimpleSlideShow.Pause('E4');" onmouseout="zxcSimpleSlideShow.Auto('E4');" /></a>
     <br /><br />
     Simple Slide Show with animated width<br />
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSimpleSlideShow.GoTo('E5',0);" />
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSimpleSlideShow.GoTo('E5',1);" />
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSimpleSlideShow.GoTo('E5',2);" />
     <input type="button" name="" value="GoTo 3" onmouseup="zxcSimpleSlideShow.GoTo('E5',3);" />
     <input type="button" name="" value="Next" onmouseup="zxcSimpleSlideShow.Next('E5',1);" />
     <input type="button" name="" value="Back" onmouseup="zxcSimpleSlideShow.Next('E5',-1);" />
     <br />
     <br />
     <a><img id="E5" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" border="0"  onmouseover="zxcSimpleSlideShow.Pause('E5');" onmouseout="zxcSimpleSlideShow.Auto('E5');" /></a>
     <br /><br />
     Simple Slide Show with animated height<br />
     <input id="b1" type="button" name="" value="GoTo 0" />
     <input id="b2" type="button" name="" value="GoTo 1" />
     <input id="b3" type="button" name="" value="GoTo 2" />
     <input id="b4" type="button" name="" value="GoTo 3" />
     <input id="b5" type="button" name="" value="Next" />
     <input id="b6" type="button" name="" value="Back" />
     <br />
     <br />
     <a><img id="E6" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" border="0" /></a>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Slide Show
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcSimpleSlideShow={
    
     Next:function(id,ud){
      var o=this[id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this[id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;
        this.rotate(o,nu);
      }
     },
    
     Auto:function(id,ms){
      var o=this[id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this[id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,m=o.Mode,ary=o.Imgs,ms=o.Animate,hold=o.Hold,add=o.AddEvents,srt=o.AutoStart,m=typeof(m)=='string'?m.charAt(0).toLowerCase():'',ms=typeof(ms)=='number'&&ms>0?ms:1000,img=document.getElementById(id),src,c=document.createElement('IMG'),e,z0=0,z1=0;
      if (img&&ary instanceof Array){
       c.style.position='absolute';
       c.style.zIndex='101';
       c.style.left='-3000px';
       c.style.top='-3000px';
       document.body.appendChild(c);
       for (;z0<ary.length;z0++){
        src=ary[z0][0];
        ary[z0][0]=new Image();
        ary[z0][0].src=src;
       }
       this[id]={
        id:id,
        img:img,
        a:img.parentNode.nodeName.toUpperCase()=='A'?img.parentNode:null,
        c:[c,m=='w'?'width':m=='h'?'height':m=='h'?'height':''],
        ary:ary,
        lgth:ary.length-1,
        ud:1,
        ms:ms,
        hold:typeof(hold)=='number'&&hold>0?hold:ms*4,
        cnt:0
       }
       if (add instanceof Array){
        for (;z1<add.length;z1++){
         if (add[z0]&&add[z0][0]){
          o=document.getElementById(add[z1][0]);
          e=add[z1][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z1][2]]){
           this.addevt(o,e,add[z1][2],id,add[z1][3]);
          }
         }
        }
       }
       this.links(this[id],0);
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var p=this.pos(o.img),oop=this,c=o.cnt;
      o.auto=auto===true;
      c=auto===true?c+=o.ud:auto;
      c=c<0?o.lgth:c>o.lgth?0:c;
      o.cnt=c;
      if (o.ary[c][0].width>40){
       this.links(o,c);
       o.c[0].style.width=o.img.width+'px';
       o.c[0].style.height=o.img.height+'px';
       o.c[0].src=o.ary[c][0].src;
       this.animate(o,o.c,0,o.c[1]?o.img[o.c[1]]:100,new Date(),o.ms);
       o.c[0].style.left=p[0]+'px';
       o.c[0].style.top=p[1]+'px';
      }
      else if (o.auto){
       oop.Auto(o.id);
      }
     },
    
     links:function(o,nu){
      o.a?o.a.removeAttribute('href'):null;
      o.a&&o.ary[nu][1]?o.a.href=o.ary[nu][1]:null;
      o.img.removeAttribute('title');
      o.ary[nu][2]?o.img.title=o.ary[nu][2]:null;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       o.img.src=a[0].src;
       a[0].style.top='-3000px';
       o.auto?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;
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    zxcSimpleSlideShow.init({
     ID:'E4',      // the unique ID name of the image.                              (string)
     Imgs:[         // an array befining the image SRCs, link HREFs and imahe titles. (array)
      // field 0 = the Image SRC.
      // field 1 = (optional) the Link HREF.
      // field 2 = (optional) the Image title.
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Image 4']
     ],
     Animate:1000, //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Mode:'fade',  //(optional) the mode of execution, fade, width or height.        (string, default = fade)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500 //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
    });
    
    zxcSimpleSlideShow.init({
     ID:'E5',
     Imgs:[
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Image 4']
     ],
     Animate:1000,
     Mode:'width',
     Hold:2000,
     AutoStart:500
    });
    
    zxcSimpleSlideShow.init({
     ID:'E6',       // the unique ID name of the image.                               (string)
     Imgs:[         // an array befining the image SRCs, link HREFs and imahe titles. (array)
      // field 0 = the Image SRC.
      // field 1 = (optional) the Link HREF.
      // field 2 = (optional) the Image title.
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/','Image 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Image 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Image 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Image 4']
     ],
     AddEvents:[    //(optional) an array befining event calls to add.                (array)
     // field 0 = the unique ID name of the element.
     // field 1 = the event type.
     // field 0 = the script function name.
     // field 0 = the parameter to pass to the function.
    
     ['b1','mouseup','GoTo',0],
     ['b2','mouseup','GoTo',1],
     ['b3','mouseup','GoTo',2],
     ['b4','mouseup','GoTo',3],
     ['b5','mouseup','Next',1],
     ['b6','mouseup','Next',-1],
     ['E6','mouseover','Pause'],
     ['E6','mouseout','Auto']
     ],
     Animate:1000,  //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Mode:'height', //(optional) the mode of execution, fade, width or height.        (string, default = fade)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500  //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
    });
    
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 06-07-2013 at 05:05 PM.
    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/


  •  

    Posting Permissions

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