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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    16
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Question Resolved - Mouse Follow javascript

    Hi guys, i've got a .png mouse-following javascript on an html page with standard image links in it. However, as soon as I put in the mouse-follower, I was unable to click those image links... I think it has something to do that the javascript image follows directly under the mouse, so the mouse isn't actually 'getting to' the images...

    Is there something in the mouse-follow javascript i can add to make sure the image shows up and follows my mouse, but doesn't affect the mouse getting to the image links?

    *Note: I do however, have a js 'badge' on my site that links to a different website, and clicking this one still works. I get the hover text and everything.

    Here's the mouse follow js:
    Code:
    // Simple follow the mouse script
    
    var divName = 'opaquecircle'; // div that is to follow the mouse
                           // (must be position:absolute)
    var offX = -203;          // X offset from mouse position
    var offY = -203;          // Y offset from mouse position
    
    function mouseX(evt) {
    if (!evt) evt = window.event; 
    if (evt.pageX) return evt.pageX; 
    else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); 
    else return 0;
    }
    function mouseY(evt) {
    if (!evt) evt = window.event; 
    if (evt.pageY) return evt.pageY; 
    else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return 0;
    }
    
    function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
    obj.left = (parseInt(mouseX(evt))+offX) + 'px';
    obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
    document.onmousemove = follow;
    Last edited by galt; 07-29-2012 at 04:39 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,042
    Thanks
    15
    Thanked 240 Times in 240 Posts
    If you were to put a div with a higher z-index over those links it would block mouse clicking, either left or right. Often used on pages where people want to block image downloading.

  • Users who have thanked DrDOS for this post:

    galt (07-29-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,995
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    And if the div (your "opaquecircle") has a lower z-index, then it won't cover up the images. So it is a catch-22 situation.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    galt (07-29-2012)

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    16
    Thanks
    10
    Thanked 0 Times in 0 Posts
    dang... this is what i was afraid of...

    what i had was, as described, an opaque circle that was white and faded radially to completely opaque, giving the mouse a 'glowing' kind of affect when it was dragged over any image.

    is there some way i could still get this effect... i'm thinking like with two images overlayed over eachother? i have no idea how i would program this.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,042
    Thanks
    15
    Thanked 240 Times in 240 Posts
    You could put an extra transparent div over everything and get the mouse coords from that and make stuff follow the mouse movement. But you can't click what's underneath it.

  • Users who have thanked DrDOS for this post:

    galt (07-29-2012)

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    16
    Thanks
    10
    Thanked 0 Times in 0 Posts
    thanks guys. i've fixed it, but at the cost of changing everything to a position:fixed setting.... the z-index didn't seem to be working for my display:block elements, probably because i didn't have the boundaries of the elements well defined on the page, so even though it had a higher z-index, it still wouldn't click.

    check it out!:

    sirenapparel.org


  •  

    Posting Permissions

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