Image follow in Chrome

**FrickenTrevor** · 08-28-2012, 08:34 PM

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>

**vwphillips** · 08-29-2012, 10:30 AM

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>

**FrickenTrevor** · 08-31-2012, 10:34 PM

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>

**vwphillips** · 09-01-2012, 08:53 AM

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>

Thread: Image follow in Chrome

Thread Tools

Search Thread

Image follow in Chrome

Similar Threads

Trying to follow a script from this site.

Backscroll: images do not follow after another

Resizes then doesnt follow through

Follow mouse script gone bad...

Bookmarks

Bookmarks

Posting Permissions