Log in

View Full Version : Resolved 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/scripts/snoopy_cursor_trail.html




<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
<!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? :confused:



<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
<!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>