Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image following the mouse

    how can i do that?

    it has to has to has to work in Mozilla and IE

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.google.com/search?hl=en&i...+mouse+trailer

    Sometime you just need to know the right keywords for a search
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please i just need a simple image to follow my mouse... thats all, please help

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you want the whole script already written or the principles of how it's accomplished?

    The principles are simple and I can point you to som tooltip code that could be adapted to do this but I don't have any complete scripts laying about.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just the basic steps would be fine thanks.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The basic steps.
    1)Put the image in an absolute positioned DIV
    Code:
    <div id="tracker" style="position:absolute"><img src="cursorbig.gif"/></div>
    2)Track mouse move events
    in IE
    Code:
    document.onmousemove = getXY_ie;
    function getXY_ie()
    {
          X = event.x+d.body.scrollLeft;
          y = event.y+d.body.scrollTop;
    ...
    }
    in NS
    Code:
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = getXY_ns;
    function getXY_ns(evnt)
    {
          X = evnt.pageX;
          y = evnt.pageY;
    ...
    }
    3)Position the div
    Code:
    function move(x, y)
    {
        document.getElementById("tracker").style.left = x;
        document.getElementById("tracker").style.top = y;
    }
    (Put the call to move() at the end of the getXY() function)

    Then put browser checks for NS and IE.

    Or you can just use this script
    The answer does not come from thinking outside the box, it comes from realizing the truth :-
    "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

  • #7
    New Coder
    Join Date
    Dec 2003
    Location
    ireland
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    go to
    www.webmonkey.com

    and do a search lots of readymade scripts here.
    hello says narf
    and narf says hello

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For a globally available mouse following image you'd hook the document.onmousemove event and then have a handler which gets the mouse position from the event offsets it a bit so your image doesn't cover the mouse and then sets the x and y positions (or left and top positions) for the image to that offset.

    This code may work (it's untested but should be easy enough to whip into shape):

    Code:
    function MouseMoveHandler(e) {
    if (document.all) {
    var Ix = event.clientX + document.body.scrollLeft;
    var Iy = event.clientY + document.body.scrollTop;
    var Ii = document.getElementById('imageId');
    Ii.style.pixelLeft = parseInt(Ix,10) + 25;
    Ii.style.pixelTop = parseInt(Iy,10)
    } else {
    Ii.style.left = Ix + 25;
    Ii.style.top = Iy;
    }
    document.onmousemove = MouseMoveHandler;
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #9
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what is that parse intager
    ?

  • #10
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    function Position(e){
    var IE = document.all?true:false
    if (!IE){
    document.getElementById('Trail').style.top = e.pageY
    document.getElementById('Trail').style.left = e.pageX
    }
    if (IE) {
    document.getElementById('Trail').style.top = event.clientY + document.body.scrollLeft
    document.getElementById('Trail').style.left = event.clientX + document.body.scrollTop
    }}
    thats what i came up with


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •