image appear to the right of cursor onmouseover

chopficaro · 09-20-2012, 07:01 PM

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

AndrewGSW · 09-21-2012, 12:04 AM

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.

vwphillips · 09-21-2012, 10:09 AM

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>

AndrewGSW · 09-21-2012, 12:45 PM

@Vic Thank you. Don't know why I put the image to the left, Doh!

chopficaro · 09-24-2012, 11:32 PM

TYVM! this is perfect!