Results 1 to 10 of 10

Thread: Mouse Trailer question

  1. #1
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouse Trailer question

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    At the end of the script, change:

    Code:
    setInterval("cycle()",rate)
    to this:

    Code:
    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:

    HTML Code:
    <img src="whatever.gif" onclick="zapEffect();">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks!

    This works - thank you!

  4. #4
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.c.../chic/test.htm

    Thanks,
    Jen

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Yes!

    This is mac-happy now! Thanks for the help

  7. #7
    Join Date
    Mar 2006
    Location
    Blaine, MN
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouse Trailer

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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. That said, here is where, near the top of the script, that you add your images (along with their width and height):

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2006
    Location
    Blaine, MN
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks for your reply

    I appreciate your feedback.
    TLS

  10. #10
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default See it in action

    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

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
  •