CODEWITHSUNDEEP
javascriptmouseover
hncl
hncl

Reputation: 2295

KineticJS - Custom mouse cursor style using url

I am trying to change the cursor style using PNG image, here is my script:

   group.on("mouseover", function(){
          document.body.style.cursor =  "url('../../Content/icons/zoom_in.png'), auto";
        //  document.body.style.cursor =  "pointer";
        });
   group.on("mouseout", function() {
      document.body.style.cursor = "default";
    });

I tested the script using change to pointer, and it works well. I would appreciate your suggestions and thanks in advance.

Upvotes: 3

Views: 3025

Answers (2)

hncl
hncl

Reputation: 2295

I found the answer, the PNG file should be converted to CUR file, I used nice program called AniFX's. The script is:

group.mouseenter(function(){
    document.body.style.cursor =  "url('../../Content/icons/zoom_in.cur'), auto";
    //  document.body.style.cursor =  "pointer";
});

Upvotes: 2

Lee McGrath
Lee McGrath

Reputation: 341

I assume group is a JQuery object. I would give mouseenter/mouseleave a go.

group.mouseenter(function(){
    document.body.style.cursor =  "url('../../Content/icons/zoom_in.png'), auto";
    //  document.body.style.cursor =  "pointer";
});
group.mouseleave(function(){
    document.body.style.cursor = "default";
});

see Javascript/jQuery mouseover and mouseout Event Listeners

Upvotes: 2

Related Questions