CODEWITHSUNDEEP
javascriptjquerycssimage
Prasanna
Prasanna

Reputation: 2641

Binding an image to the mouse cursor

I want to bind an image along with the mouse cursor using jQuery.

The following code works with firefox but not with IE8.

$('#cursor').css({
       left:  e.pageX,
       top:   e.pageY
    });
//"cursor" is the id of the <img>.

Do we have an alternate to do so?

Upvotes: 1

Views: 1400

Answers (3)

user1726343
user1726343

Reputation:

I suspect you are not using jQuery to bind your event listener. For IE, the properties you would use for mouse coordinates are e.clientX and e.clientY

if(typeof e.pageX !== "undefined"){
    $('#cursor').css({
           left:  e.pageX,
           top:   e.pageY
    });
} else {
    $('#cursor').css({
           left:  e.clientX,
           top:   e.clientY
    });
}

Of course, if you were to use jQuery to bind your listeners, you wouldn't have to worry about this, since the event object passed to a handler bound with jQuery has the mouse coordinates normalised in the pageX and pageY properties cross browser:

$('document').mousemove(function (evt) {
    $('#cursor').css({
       left:  evt.pageX,
       top:   evt.pageY
    });
});

Upvotes: 2

SISYN
SISYN

Reputation: 2259

Try setting its position to absolute and manipulating the top and left attributes. You can do it with jQuery like this:

$("#cursor").css({"position":"absolute","left":e.pageX+"px","top":e.pageY+"px"});

Or you can use plain old Javascript and do something like this:

document.getElementById("cursor").style.position = "absolute";
document.getElementById("cursor").style.left = e.pageX+"px";
document.getElementById("cursor").style.top = e.pageY+"px";

But depending on which version of IE it is, you may need to use clientX and clientY rather than pageX and pageY.

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

try:

$('#cursor').css({'top': e.clientY, 'left': e.clientX});

Upvotes: 0

Related Questions