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 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts

    image appear to the right of cursor onmouseover

    how do i make an image appear to the right of the user's cursor onmouseover?
    luv u guys btw!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you use onmouseover then the image will appear once in odd positions. This is because onmouseover happens just as the mouse moves over (into) an element.

    The following example uses onmousemove so that the image follows the cursor as it moves within the element.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Some Title</title>
    <style type="text/css">
    #follower { 
        position: absolute;
    }
    #thebox {
        width: 400px;
        height: 300px;
        outline: red solid thin;
    }
    </style>
    </head>
    <body>
    <img id="follower" src="http://lorempixel.com/150/150/sports" 
        height="150" width="150" alt="follow cursor">
    <div id="thebox">Big box</div>
    <script type="text/javascript">
    
    window.onload = function () {
        var follower;
        document.getElementById('thebox').onmousemove = function (e) {
            var evt = e || window.event;
            follower = follower || document.getElementById('follower');
            follower.style.left = parseInt(evt.pageX)-170+"px";
            follower.style.top = parseInt(evt.pageY)-40+"px";
        };
    }
    </script>
    </body>
    </html>
    Use this as a guide. Otherwise, you'll need to clarify what you are hoping to achieve.

    Added: You could set css display:none for the image and change this within the mousemove event so that it appears. You would then need to also add onmouseout to hide the image again.
    Last edited by AndrewGSW; 09-21-2012 at 01:13 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    X-Browser


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Some Title</title>
    <style type="text/css">
    #follower {
        position: absolute;
    }
    
    </style>
    </head>
    <body>
    <img id="follower" src="http://lorempixel.com/150/150/sports" height="150" width="150" alt="follow cursor">
    <script type="text/javascript">
    
    window.onload = function () {
        document.onmousemove = function (e) {
            e = e || window.event,mse=Mse(e);
            var img = document.getElementById('follower');
            img.style.left = mse[0]+17+"px";
            img.style.top = mse[1]+"px";
        }
    }
    
    function Mse(e){
     if (window.event){
      var docs=[document.body.scrollLeft,document.body.scrollTop];
      if (!document.body.scrollTop){
       docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
      }
      return [e.clientX+docs[0],e.clientY+docs[1]];
     }
     return [e.pageX,e.pageY];
    }
    
    
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @Vic Thank you. Don't know why I put the image to the left, Doh!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    TYVM! this is perfect!


  •  

    Posting Permissions

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