PDA

View Full Version : Mouse Trailer question



rotarjen
02-27-2006, 08:58 PM
I'm using a simple image mouse trail, which works great, and I want to add command to drop the image when the user clicks on a graphic. Can anyone help me add this function to the script I'm using:

<script>

/******************************************
* 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("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10)

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

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.body.scrollTop+document.body.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+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
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);
c.top=Math.min(bottomedge, DY+offsety);
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.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.body.clientWidth-T1[1]
bottomedge=document.body.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>

jscheuer1
02-28-2006, 02:18 PM
At the end of the script, change:


setInterval("cycle()",rate)

to this:


var carp=setInterval("cycle()",rate)

function zapEffect(){
clearInterval(carp);
for (i=0;i<nos;i++)
document.all["CUR"+i].style.display='none';
}

Then, for your image to click on, use this:


<img src="whatever.gif" onclick="zapEffect();">

rotarjen
02-28-2006, 03:43 PM
This works - thank you!

rotarjen
03-10-2006, 03:10 PM
Hi John,

I'm getting reports back that the image doesn't go away in Safari - any tips for making this work for Mac?

Here's a link to show you how I'm using this...
http://www.reliablebusinesssupport.com/development/chic/test.htm

Thanks,
Jen

jscheuer1
03-10-2006, 03:39 PM
Sorry, my mistake. I thought the script only worked (of current browsers) in IE to begin with. I have no Mac to test on but, using this instead of the current function zapEffect(), should fix that (the images not disappearing in Safari):


function zapEffect(){
clearInterval(carp);
for (var i=0;i<nos;i++)
if (document.getElementById)
document.getElementById('CUR'+i).style.display='none';
else if (document.all)
document.all["CUR"+i].style.display='none';
}

If not, find a Mac expert, I haven't even seen one (a Mac or a Mac expert :) ) in years.

rotarjen
03-19-2006, 09:39 PM
This is mac-happy now! Thanks for the help:)

tlsgraphics
03-21-2006, 02:00 AM
I'm new to this forum.
Where is the image placed in this script?
I would really like to try this with the animated boat.gif I have on this site.
www.tlsgraphics.net/Cabin05.htm
Thanks for your feedback,
TLS

jscheuer1
03-21-2006, 04:16 AM
First off, I don't think you don't want to use that image, something smaller and not an animation (the script will take care of moving the image around). Second, you generally want to use a few different images for this script, as in the demo (http://www.dynamicdrive.com/dynamicindex13/trailer.htm). That said, here is where, near the top of the script, that you add your images (along with their width and height):


T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10)

You can include the path if the images are not in the same folder as the page.

tlsgraphics
03-21-2006, 08:18 PM
I appreciate your feedback.
TLS

rotarjen
04-13-2006, 10:28 PM
Just wanted to say Thanks again for your help with the Mouse Trailer.
In case you want to see it in action, here it is...

www.thechicmagnet.com

Jen