PDA

View Full Version : Cursor Image Trail Behind Graphics



hackerglory
03-23-2012, 05:34 PM
1) Script Title: Image Trail Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex13/trailer.htm

3) Describe problem: I was able to load the cursor trail, but the trail is behind my webpage and graphics, while the cursor is working fine (on top). Also, the graphics in the trail are really close together, almost on top of each other..

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">
/******************************************
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("https://sitebuilder.intuitwebsites.com/~site/builder/filePreview/trail1.gif",38,35,"https://sitebuilder.intuitwebsites.com/~site/builder/filePreview/trail2.gif",30,31,"https://sitebuilder.intuitwebsites.com/~site/builder/filePreview/trail3.gif",28,26,"https://sitebuilder.intuitwebsites.com/~site/builder/filePreview/trail4.gif",22,21,"https://sitebuilder.intuitwebsites.com/~site/builder/filePreview/trail5.gif",16,16,"https://sitebuilder.intuitwebsites.com/~site/builder/filePreview/trail6.gif",10,10)

var offsetx=0 //x offset of trail from mouse pointer
var offsety=0 //y offset of trail from mouse pointer

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.documentElement.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.documentElement.scroll=Top+document.documentElement.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

for (i=0;i<nos;i++){
createContainer("cur"+i,i*10,i*10,i*3+1,i*3+2,"",'<img src="'+T1[i*3]+'" width="'+T1[(i*3+1)]+'" height="'+T1[(i*3+2)]+'" border="0" />')
}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!A && !B) ? '<layer id="'+N+'" left="'+Xp+'px" top="'+Yp+'px" width="'+W+'px" height="'+H+'px"' : '<div id="'+N+'" style="position:absolute; left:'+Xp+'px; top:'+Yp+'px; width:'+W+'px; height:'+H+'px; ');
if(St){
if (C)
write(' style="');
write(St+';" ')
}
else write((A || B)?'"':"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}

function closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function moveContainer(N,DX,DY){
c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
if (!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge, DX+offsetx)+"px";
c.top=Math.min(bottomedge, DY+offsety)+"px";
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.documentElement.scrollLeft;
ie5fix2=document.documentElement.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("cur"+i,getXpos("cur"+(i+1)),getYpos("cur"+(i+1)))
}
}

function newPos(e){
moveContainer("cur"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=document.documentElement.clientWidth-T1[1]
bottomedge=document.documentElement.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)


</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>