Question

Hi i have this code sample from This Post. What i want is a png image to display next to the cursor when the cursor goes over a hyperlink or any kind of “a” link.

Here’s the original:

var $img = $('img');
$img.hide();
$('div').mousemove(function(e) {
  $img.stop(1, 1).fadeIn();
  $('img').offset({
    top: e.pageY - $img.outerHeight(),
    left: e.pageX - $img.outerWidth()
});
}).mouseleave(function() {
$img.fadeOut();
});

HTML:

<div>
<img src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png"    
/>
</div>

and here’s the version i tried to modify without using HTML and loading the image only through jQuery :S

*var img = $("../Cursor.png");
$img.hide();
$('a').mousemove(function(e) {
  $img.stop(1, 1).fadeIn();
  $('img').offset({
    top: e.pageY - $img.outerHeight(),
    left: e.pageX - ($img.outerWidth()/2)
});
}).mouseleave(function() {
$img.fadeOut();
});?

I’m sure it’s a relatively easy fix and i’m still leaning, could you please help me.
Thanks 🙂

Answer 1

This is exactly what you are needing.

<script type="text/javascript">
    $(document).ready(function() {
        var $img = $("#cursor");
        $img.hide();
        $('a').mousemove(function(e) {
            $img.stop(1, 1).fadeIn();
            $img.offset({
                top: e.pageY - $img.outerHeight(),
                left: e.pageX - ($img.outerWidth()/2)
            });
        }).mouseleave(function() {
            $img.fadeOut();
        });
    });
</script>

<img id="cursor" src="http://i574.photobucket.com/albums/ss184/wsganewsletter/Other/Icon-Mega.png" style="position: absolute">
<a href="#">hover me</a>