Results 1 to 4 of 4

Thread: Image follow in Chrome

  1. #1
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Unhappy Image follow in Chrome

    Hey thanks for taking a look at this :)

    There's this script that works on every browser (even IE 9, out of all the things) but not on Chrome.
    Can someone help me to re-write this so it works for chrome? Im not the best at JavaScript :p

    Here's the site (the code is also bellow):
    http://rainbow.arch.scriptmania.com/...sor_trail.html

    Code:
    <SCRIPT type="text/javascript">
    
    var Ver4=parseInt(navigator.appVersion.charAt(0))>=4
    var IE=navigator.appName.indexOf("Microsoft")!=-1
    var al, imagesrc, ex=-32, ey=-32, x0=-32, y0=-32
      
    function MoveSnoop()
    {
      if (Math.abs(ex-x0)>=10) { x0+=Math.floor((ex-x0)*0.1) }
      else if (ex!=x0) { x0+=Math.abs(ex-x0)/(ex-x0) }
      if (Math.abs(ey-y0)>=10) { y0+=Math.floor((ey-y0)*0.1) }
      else if (ey!=y0) { y0+=Math.abs(ey-y0)/(ey-y0) }
      
      imagesrc=""
      if ( (ex<x0) && ( (x0-ex) > Math.abs(y0-ey)/2 ) )
      { imagesrc="snoopl.gif"
        if ( (x0-ex) < Math.abs(y0-ey)*2 )
        { if (ey<y0) imagesrc="snoopl.gif"
          if (ey>y0) imagesrc="snoopl.gif"
        }
      }
      if ( (ex>x0) && ( (ex-x0) > Math.abs(y0-ey)/2) )
      { imagesrc="snoopr.gif"
        if ( (ex-x0) < Math.abs(y0-ey)*2 )
        { if (ey<y0) imagesrc="snoopr.gif"
          if (ey>y0) imagesrc="snoopr.gif"
        }
      }
      if (imagesrc=="")
      { if (ey<y0) imagesrc="snoopr.gif"
        if (ey>y0) imagesrc="snoopr.gif"
        if ((ex==x0)&&(ey==y0)) imagesrc="snoop.gif"
      }
      
      if (Ver4)
      { if (!IE)
        { document.FlyLayer.document.images.fly.src=imagesrc }
        else document.all.FlyLayer.document.images.fly.src=imagesrc
      }
      al.left=x0-47
      al.top=y0
    
      setTimeout("MoveSnoop();",100)
    }
    
    function MainMouseEvent(e)
    { 
      if (Ver4)
      { if (!IE)
        { ex=e.pageX
          ey=e.pageY }
        else
        { ex=event.clientX + document.body.scrollLeft
          ey=event.clientY + document.body.scrollTop }
      }
    }
    
    function ScriptSetup()
    { 
      isIm = (document.images) ? 1 : 0
      if (isIm)
      { arImLoad = new Array
        ('snoop','snoopl','snoopr')
        arImList = new Array ()
        for (counter in arImLoad)
        { arImList[counter] = new Image()
          arImList[counter].src = arImLoad[counter] + '.gif'
        }
      }
      
      if (Ver4)
      { if (!IE)
        { al=document.FlyLayer
          document.captureEvents(Event.MOUSEMOVE)
        }
        else
        { al=document.all.FlyLayer.style }
        document.onmousemove = MainMouseEvent
        MoveSnoop()
      }
    }
    
    function ShowSnoop()
    { 
      if(Ver4)
      { s ='<DIV STYLE="visibility:hidden"></DIV>'
        s+='<DIV ID="FlyLayer" STYLE="position:absolute; '
        s+='top:-32; left:-32; width:32; height:32">'
        s+=''
        s+='<IMG NAME="fly" SRC="snoop.gif" border=0>'
        s+='</A></DIV>'
        document.writeln(s)
      }
    }
    
    window.onload = ScriptSetup
    ShowSnoop()
    
    </SCRIPT>
    Last edited by FrickenTrevor; 09-07-2012 at 08:08 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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>
    </head>
    
    <body>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    /*
    Snoopy Follow Cursor Trail
    Visit http://www.rainbow.arch.scriptmania.com/scripts/
    */
    var w=32;
    var h=32;
    var imgs=['http://rainbow.arch.scriptmania.com/scripts/snoop.gif','http://rainbow.arch.scriptmania.com/scripts/snoopr.gif','http://rainbow.arch.scriptmania.com/scripts/snoopl.gif']
    
    
    function MoveSnoop(){
     var fly=document.getElementById('fly'),nu;
     if (Math.abs(XY[0]-xy[0])>=10) {
      xy[0]+=Math.floor((XY[0]-xy[0])*0.1);
     }
     else if (XY[0]!=xy[0]) {
      xy[0]+=Math.abs(XY[0]-xy[0])/(XY[0]-xy[0]);
     }
     if (Math.abs(XY[1]-xy[1])>=10) {
      xy[1]+=Math.floor((XY[1]-xy[1])*0.1);
     }
     else if (XY[1]!=xy[1]) {
      xy[1]+=Math.abs(XY[1]-xy[1])/(XY[1]-xy[1]);
     }
     nu=Math.abs(xy[0]-XY[0])<10?0:xy[0]-XY[0]<10?1:2;
     if (nu!=Nu){
      fly.src=imgs[nu];
      Nu=nu;
     }
     fly.style.left=xy[0]+47+'px';
     fly.style.top=xy[1]+'px';
    }
    
    function MainMouseEvent(e){
     var e=e||window.event;
     if (window.event){
      var docs=[document.body.scrollLeft,document.body.scrollTop];
      if (!document.body.scrollTop){
       docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
      }
      XY=[e.clientX+docs[0],e.clientY+docs[1]];
     }
     else {
      XY=[e.pageX,e.pageY];
     }
    }
    
    var Nu=0;
    var xy=[-w,-h];
    var XY=[-w,-h];
    
    document.write('<IMG id="fly" SRC="'+imgs[Nu]+'" border=0 style="position:absolute;z-Index:101;top:-1000px; left:-1000px; width:'+w+'px; height:'+h+'px;">')
    
    document.onmousemove = function(e){ MainMouseEvent(e); }
    
    setInterval(function(){ MoveSnoop(); },100)
    
    /*]]>*/
    </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
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Sorry for the late reply, but If I wanted to edit the variables for how close snoopy follows the mouse I edit the highlighted parts right?

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    /*
    Snoopy Follow Cursor Trail
    Visit http://www.rainbow.arch.scriptmania.com/scripts/
    */
    var w=32;
    var h=32;
    var imgs=['http://rainbow.arch.scriptmania.com/scripts/snoop.gif','http://rainbow.arch.scriptmania.com/scripts/snoopr.gif','http://rainbow.arch.scriptmania.com/scripts/snoopl.gif']
    
    
    function MoveSnoop(){
     var fly=document.getElementById('fly'),nu;
     if (Math.abs(XY[0]-xy[0])>=10) {
      xy[0]+=Math.floor((XY[0]-xy[0])*0.1);
     }
     else if (XY[0]!=xy[0]) {
      xy[0]+=Math.abs(XY[0]-xy[0])/(XY[0]-xy[0]);
     }
     if (Math.abs(XY[1]-xy[1])>=10) {
      xy[1]+=Math.floor((XY[1]-xy[1])*0.1);
     }
     else if (XY[1]!=xy[1]) {
      xy[1]+=Math.abs(XY[1]-xy[1])/(XY[1]-xy[1]);
     }
     nu=Math.abs(xy[0]-XY[0])<10?0:xy[0]-XY[0]<10?1:2;
     if (nu!=Nu){
      fly.src=imgs[nu];
      Nu=nu;
     }
     fly.style.left=xy[0]+47+'px';
     fly.style.top=xy[1]+'px';
    }
    
    function MainMouseEvent(e){
     var e=e||window.event;
     if (window.event){
      var docs=[document.body.scrollLeft,document.body.scrollTop];
      if (!document.body.scrollTop){
       docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
      }
      XY=[e.clientX+docs[0],e.clientY+docs[1]];
     }
     else {
      XY=[e.pageX,e.pageY];
     }
    }
    
    var Nu=0;
    var xy=[-w,-h];
    var XY=[-w,-h];
    
    document.write('<IMG id="fly" SRC="'+imgs[Nu]+'" border=0 style="position:absolute;z-Index:101;top:-1000px; left:-1000px; width:'+w+'px; height:'+h+'px;">')
    
    document.onmousemove = function(e){ MainMouseEvent(e); }
    
    setInterval(function(){ MoveSnoop(); },100)
    
    /*]]>*/
    </script>

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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>
    </head>
    
    <body>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    /*
    Snoopy Follow Cursor Trail
    Visit http://www.rainbow.arch.scriptmania.com/scripts/
    */
    var w=32;  // the snoopy width
    var h=32;  // the snoopy height
    var f=0.3; // f = the speed of the 'follow mouse' from .001 to 1
    var x=47;  // x = the horizontal distance from the mouse when stationary
    var y=0;   // y = the horizontal distance from the mouse when stationary
    var imgs=['http://rainbow.arch.scriptmania.com/scripts/snoop.gif','http://rainbow.arch.scriptmania.com/scripts/snoopr.gif','http://rainbow.arch.scriptmania.com/scripts/snoopl.gif']
    
    
    function MoveSnoop(){
     var fly=document.getElementById('fly'),nu;
     if (Math.abs(XY[0]-xy[0])>=10) {
      xy[0]+=Math.floor((XY[0]-xy[0])*f);
     }
     else if (XY[0]!=xy[0]) {
      xy[0]+=Math.abs(XY[0]-xy[0])/(XY[0]-xy[0]);
     }
     if (Math.abs(XY[1]-xy[1])>=10) {
      xy[1]+=Math.floor((XY[1]-xy[1])*f);
     }
     else if (XY[1]!=xy[1]) {
      xy[1]+=Math.abs(XY[1]-xy[1])/(XY[1]-xy[1]);
     }
     nu=Math.abs(xy[0]-XY[0])<10?0:xy[0]-XY[0]<10?1:2;
     if (nu!=Nu){
      fly.src=imgs[nu];
      Nu=nu;
     }
     fly.style.left=xy[0]+x+'px';
     fly.style.top=xy[1]+y+'px';
    }
    
    function MainMouseEvent(e){
     var e=e||window.event;
     if (window.event){
      var docs=[document.body.scrollLeft,document.body.scrollTop];
      if (!document.body.scrollTop){
       docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
      }
      XY=[e.clientX+docs[0],e.clientY+docs[1]];
     }
     else {
      XY=[e.pageX,e.pageY];
     }
    }
    
    var Nu=0;
    var xy=[-w,-h];
    var XY=[-w,-h];
    f=Math.max(Math.min(f,1),.001);
    
    document.write('<IMG id="fly" SRC="'+imgs[Nu]+'" border=0 style="position:absolute;z-Index:101;top:-1000px; left:-1000px; width:'+w+'px; height:'+h+'px;">')
    
    document.onmousemove = function(e){ MainMouseEvent(e); }
    
    setInterval(function(){ MoveSnoop(); },50)
    
    /*]]>*/
    </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/

Similar Threads

  1. Trying to follow a script from this site.
    By theremotedr in forum Dynamic Drive scripts help
    Replies: 18
    Last Post: 08-03-2012, 11:20 AM
  2. Backscroll: images do not follow after another
    By potklei in forum JavaScript
    Replies: 0
    Last Post: 06-07-2008, 10:03 AM
  3. Resizes then doesnt follow through
    By KevinKeegan in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-24-2007, 12:48 PM
  4. Follow mouse script gone bad...
    By pcbrainbuster in forum JavaScript
    Replies: 13
    Last Post: 04-19-2007, 07:14 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
  •