Changing the look of the cursor

Question

I am making an online scratchcard and i need to know how to change my cursor into a coin.

here is an example of the code i already have tried:

    <div id="krasvak" class="scratchpad"></div>
  <style>
    #krasvak {
      width: 25%;
      height: 100px;
      border: solid 1px;
      display: inline-block;
    }
  </style>
  <script type="text/javascript" src="wScratchPad.js"></script>
  <script type="text/javascript">

    $('#krasvak').wScratchPad({
      cursor: 'cursor: url("images/muntje.png"), auto;',
      scratchMove: function (e, percent) {
        console.log(percent);
        if (percent > 70)
        {
            this.clear();
            window.alert("U heeft uw code gekrast");
            window.location.href='compleet.php';
        }
      }
    });
    $('#krasvak').wScratchPad('bg', 'images/slide1.png');
    $('#krasvak').wScratchPad('fg', 'images/overlay.png');
    $('#krasvak').wScratchPad('size', 10);
  </script>

and here is a part of the java script code

    $.fn.wScratchPad.defaults = {
size        : 5,          // The size of the brush/scratch.
bg          : '#cacaca',  // Background (image path or hex color).
fg          : '#6699ff',  // Foreground (image path or hex color).
realtime    : true,       // Calculates percentage in realitime
scratchDown : null,       // Set scratchDown callback.
scratchUp   : null,       // Set scratchUp callback.
scratchMove : null,       // Set scratcMove callback.
cursor      : 'crosshair' // Set cursor.
};

I would really appriciate it if someone could help me out.

Answer 1

According to the github of the plugin there's a solution:

---

Update on the Fly

var sp = $("#elem").wScratchPad();

sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');

// Or directly with element.

$("#elem").wScratchPad('image', './images/winner.png');

---

So try this:

<div id="krasvak" class="scratchpad"></div>
  <style>
    #krasvak {
      width: 25%;
      height: 100px;
      border: solid 1px;
      display: inline-block;
    }
  </style>
  <script type="text/javascript" src="wScratchPad.js"></script>
  <script type="text/javascript">

    $('#krasvak').wScratchPad({
      scratchMove: function (e, percent) {
        console.log(percent);
        if (percent > 70)
        {
            this.clear();
            window.alert("U heeft uw code gekrast");
            window.location.href='compleet.php';
        }
      }
    });
    $('#krasvak').wScratchPad('bg', 'images/slide1.png');
    $('#krasvak').wScratchPad('fg', 'images/overlay.png');
    $('#krasvak').wScratchPad('size', 10);
    $('#krasvak').wScratchPad('cursor', 'url("./images/muntje.png") 5 5, default');
  </script>