CODEWITHSUNDEEP
javascriptcursor
Prashant Anand Verma
Prashant Anand Verma

Reputation: 21

Want to use custom image for cursor of bigger size. What is the workaround for that? Is it possible to do it with javascript?

$('#dustingBrush').unbind('click').bind('click' , function () {
    $(".section, window.parent.document").css({"cursor": "url("+localImagePath + data.brushPointer1+"),pointer"});
    $(this).css("display" , "none");
});

The cursor image is coming from json but it is not reflecting when I am using the image of bigger size however it is working fine with smaller image.

Please suggest me the workaround for this.

Thanks ....

Upvotes: 0

Views: 662

Answers (1)

Sherin Mathew
Sherin Mathew

Reputation: 1141

Please see limitation section in https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url Firefox allows you to use 128×128px images. Larger images are ignored. As per the article, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms

Workaround would be to hide the cursor and use a trailing div which contains the bigger image.

This will simulate the behaviour of a bigger cursor.

The sample CSS, html and jquery is given below.

CSS:

#replacePointer {
    position: absolute;
    cursor:none;
}

HTML:

<div id="replacePointer"><img src="http://www.w3schools.com/images/w3logotest2.png" /></div>

Jquery:

$(document).bind('mousemove', function(e){
$('#replacePointer').css({
    left:  e.pageX -10,
    top:   e.pageY -10
});
});

Upvotes: 2

Related Questions